Feb 08
Lightview – eine weitere schicke Bildergalerie
Vor wenigen Tagen veröffentliche Nick Stakenburg Version 1.1.0 seines Lightview-Tools, mit dessen Hilfe man eine sehenswerte Fotogalerie recht schnell auf die eigene Homepage zaubern kann.
Zu den Stärken dieses Javascript-Tools zählt sicherlich die hohe Browserunterstützung (Internet Explorer 6+, Firefox 1.5+, Safari 2+ and Opera). Es ist dafür ausgelegt, in allen Browsern ein sauberes Bild – ohne Flackern – zu erzeugen und passt sich automatisch der Bildschirmauflösung an.
Desweiteren lässt sich Lightview ohne große Vorkenntnisse in ein bestehendes Projekt einzubinden. Es können dabei sowohl einzelne Bilder als auch Galeriegruppen angesprochen werden, wobei es bei letzteren auch die Möglichkeit gibt, die Bilder in einer Diashow wiederzugeben.
Lightview setzt die kürzlich veröffentlichte Prototype-Version 1.6.0.2 voraus. Falls man Effekte nutzen möchte, benötigt man zusätzlich Scriptaculous 1.8.1.
Wie bei ähnlichen Frameworks werden im HTML-Kopf die erforderlichen Dateien geladen.
<link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js'></script>
Bis auf die scriptaculous.js, die benötigt wird, wenn man besondere Effekte einbauen will, sind alle anderen Dateien Pflicht.
Der Anwenden von Lightview auf ein einzelnes Bild geschieht über das class-Attribut.
<a href='image.jpg' class='lightview'>image</a>
Es ist ebenso möglich Bilder zu Gruppen zusammenzufassen. Dafür verwendet man zusätzlich das rel-Attribut mit dem Wert gallery[group], wobei group frei gewählt werden kann.
<a href='image.jpg' class='lightview' rel='gallery[group]'>image</a> <a href='image.jpg' class='lightview' rel='gallery[group]'>image</a>
Desweiteren bietet Lightview die Möglichkeit Bilder mit Titeln und Untertiteln zu versehen. In beiden Fällen wird das title-Attribut benutzt. Als Trennzeichen zwischen Titel und Untertitel dienen zwei Doppelpunkte.
<a href='image.jpg' title='Eine Bildüberschrift' class='lightview'>image</a> <a href='image.jpg' title='Eine Bildüberschrift :: und sogar ein Untertitel' class='lightview'>image</a>
Zum Veranschaulichen habe ich folgende Demonstrations-Seite erstellt.
Ähnliche Themen im Blog:
Februar 21st, 2008 at 12:34 am
[…] berichteten wir über den Einsatz von Lightview als Bildergalerie. Der Autor Nick Stakenburg hat jetzt die Version 2 seiner Script-Bibliothek veröffentlicht. Bisher […]
April 19th, 2008 at 9:47 am
es ist ja möglich, über eine verknüpfung (text oder bild), die lightview gallery zu starten. mit der lightbox – dem vorgänger – war es aber auch möglich, einen hotspot zu verknüpfen. probiere ich das für lightview, wird das bild in einem neuen browser-fenster (tab) geöffnet, statt über das script.
hast du einen ahnung warum?
Februar 18th, 2009 at 9:22 pm
Eine hoffentlich kurze Frage zu dem beschriebenen:
„Der Anwenden von Lightview auf ein einzelnes Bild geschieht über das class-Attribut. image “
Wo und wie genau muss dieses eingetragen werden. Ich würde diese Lightbox Gallerie gerne in 4images einbinden, komme aber einfach nicht weiter…
Februar 20th, 2009 at 10:06 am
Hallo CS,
hast du alle JavaScript-Dateien eingebunden? Jedes deiner Bilder benötigt die Attribute class=“lightview“ und rel=“gallery[‚meinegruppe‘]“. Hast du dies gemacht? Wo findet man deine Seite? Kann es mir ja mal anschauen und dir sagen, wo dein Fehler liegt.
April 29th, 2009 at 3:44 pm
hallo zusammen,
ich versteh das nicht, bei mir funktioniert’s nicht. hab die testversion heruntergeladen, aber es geht einfach nicht.
hab eine test-seite gemacht, mit den erforderlichen befehlen im head und dann body bereich, sowie die *.js in die ordner kopiert, erhalte aber immer „fehler auf der seite“
kann mir jemand genau beschreiben, was ich zu tun habe? bzw. muss ich noch was mehr machen?
herzlichen dank und gruss, stella
Februar 9th, 2010 at 12:13 pm
Hi,
ich habe mir den 3 Euro Account gegönnt aber es geht nicht. Die Klasse wird nicht geöffnet. Ich habe mir dann Deinen quelltext kopiert, aber auch damit gehts nicht. Nun habe ich genauer hingeschaut was ich mir da von der Autorenseite gezogen habe und stelle fest dass nur die lightview Datei im js Ordner ist, aber nicht die Prototype. Wo kriege ich die denn her, wenn nicht von der Autorenseite?
Februar 14th, 2010 at 1:29 pm
Hi,
zuerstmal: tolle Scripte habt Ihr da auf Eurer Seite. Ich habe leider zwei Probleme:
Zur Slideshow: Sobald ich die Thumbnails ausblende – durch CSS oder sogar width=“0px“ – mosert der IE 8.0. – auf anderen Browsern ist das Ausblenden der Thumbnail problemlos möglich! Welche Möglichkeiten gibt es, wenn ich nur die Slideshow selbst anzeigen will?
Lightview funktioniert wohl auf allen Browsern, der IE 8.0 bringt ’ne Fehlermeldung in lightview.js (Zeile 45, Zeichen 1) – auch dann, wenn ich mir Eure Webseite direkt im Internet ansehe! Bitte mal kontrollieren.
Gruß, EH