Dateien: bilder.html, jquery-1.10.2.min.js, lightbox-2.6.min.js, lightbox.css
Moderne Webpräsenzen sind ohne eine animierte Bildergallerie kaum denkbar. Dafür müssen wir JavaScript benutzen. Natürlich programmieren wir eine entsprechende Funktion nicht selbst, sondern nutzen ein bestehende Bibliothek aus dem Netz: LightBox von Lokesh Dhakar (Download LightBox 2.6)
Anmerkung: Auf der Website von Lokesh steht mittlerweile eine neuere Version zur Verfügung. Deshalb ist es sinnvoll alle Dateien/Bibliotheken immer auf die eigene Site zu kopieren.
Sowohl JQuery als auch Lightbox sind in einer Minimalversion (.min.js) beigelegt, die nicht für Sichtbarkeit, sondern für möglichst kleine Dateigrößen ausgelegt sind. Sie sind also auf Ladezeit optimiert. Sollten sie externes JavaScript verwenden, achten sie immer auf solche Minimalversionen!
Die Dateien jquery-1.10.2.min.js, lightbox-2.6.min.js und lightbox.css sind im Header der HTML-Datei eingebunden.
<!-- LightBox --> <link rel="stylesheet" type="text/css" href="vorlagen/lightbox.css" /> <script type="text/javascript" src="vorlagen/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="vorlagen/lightbox-2.6.min.js"></script>
Im bilder-Ordner finden sie die Dateien close.png, loading.gif, prev.png und next.png, die lightbox.css benötigt. Die Orginaldatei von Lokesh Dhakar sucht sie im Ordner img, das habe ich aber für unser Beispiel angepaßt.
Jedes Bild wird als Link (<a href="">) in der Seite eingebunden. Dieser Link bekommt ein spezielles Attribut (<a href="" data-lightbox="Gruppe">), damit er von Lightbox behandelt wird. Das innerhalb des Links eingebundene Bild selbst sollte ein Thumbnail (Vorschaubild) des eigentlichen Bildes sein.
Dieses Attribut data-lightbox="" sollte bei einer einzelnen Grafik eindeutig sein:
<a href="bilder/single.jpg" data-lightbox="Einzeln" title="Bildüberschrift"><img src="bilder/thumb_single.jpg" /></a>
Bei einer Diashow sollte er dagegen für alle Bilder gleich sein.
<div class="Bilder"> <a href="bilder/image-1.jpg" data-lightbox="Gruppe1" title="Bild1"><img src="bilder/thumb-1.jpg" /></a> <a href="bilder/image-2.jpg" data-lightbox="Gruppe1" title="Bild2"><img src="bilder/thumb-2.jpg" /></a> <a href="bilder/image-3.jpg" data-lightbox="Gruppe1" title="Bild3"><img src="bilder/thumb-3.jpg" /></a> <a href="bilder/image-4.jpg" data-lightbox="Gruppe1" title="Bild4"><img src="bilder/thumb-4.jpg" /></a> <a href="bilder/image-5.jpg" data-lightbox="Gruppe1" title="Bild5"><img src="bilder/thumb-5.jpg" /></a> </div>
Anmerkung: Vielleicht ist es ihnen ja aufgefallen. Lightbox wird nicht auf der HTML-Seite aufgerufen (kein Funktionsaufruf). Dies ist (natürlich) kein Fehler, sondern ein Trick im Javascript Code.