Das jQuery lightBox Plugin stammt ursprünglich von Leandro Vieira Pinho und basiert auf der lightbox2 von Lokhes Dhakar. Auf der Seite leandrovieira.com/projects/jquery/lightbox bekommt man alle nötigen Dateien zum Download angeboten. Hier haben Sie die von mir eingedeutschte Version mit Buttons in deutsch und weißem Hintergrund.

Nach dem Download der Datei entpackt man den Inhalt in das Verzeichnis, das die eigene Website enthält. Es werden die Verzeichnisse "bilder" (das sind die Beispielbilder und thumbnails in den Verzeichnissen pic und pic-thumb), "js" (die nötigen Javascripte), "images" (die Buttons für vor und zurück) und "css" (zur Formatierung der Seite mit den großen Bildern) erstellt.

Die ebenfalls mitgelieferte index.htm zeigt beispielhaft die Funktionsweise und den Aufbau des Plugins.

Im Kopfbereich des Quelltextes stehen die Aufrufe

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5-mod.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Die Funktion wird mit

<script type="text/javascript">
$(function() {
$('#bilder a').lightBox();
});
</script>

aufgerufen.

Die Thumbnails werden in einen Container mit dem Namen "bilder" <div id="bilder"> gepackt und mit den größeren Bildern verlinkt (das wird durch $('#bilder a').lightBox(); angesprochen). Achtung: Das Plugin versucht auch andere (Text-)Links im Container zu parsen. Das klappt natürlich nicht.

<a href="bilder/pic/IMG_1840.jpg" title="Der Baum muss leider weg">
<img src="bilder/pic-thumb/IMG_1840.jpg" alt="" width="70" height="75" hspace="1" border="1"></a>

So sieht das bei mir aus, wobei der Text im title-Tag als Bildunterschrift ausgegeben wird.

Ich habe meine Projektseite benutzt, um das (natürlich angepasste) Plugin anzuwenden. Ein Klick auf den Screenshot öffnet das größere Bild.

Um Bilder in anderen Containern anzusprechen muss im Javascriptaufruf anstatt #bilder a einfach #irgendwas a eingetragen werden.

Die Konfiguration erfolgt in der Datei jquery.lightbox-0.5.js (jquery.lightbox-0.5.min.js ist das Javascript ohne Kommentare). In den erste 40 Zeilen stehen die Angaben für Hintergrundfarbe (overlayBgColor), Transparenz des Hintergrunds (overlayOpacity), Buttons für vor und zurück (imageBtnNext und imageBtnPrev) und so weiter. Die Kommentare sind gut verständlich.

Das Plugin steht unter der freien Lizenz Creative Commons (CC BY), was bedeutet, dass unter Nennung des Namens des Urhebers und Verlinkung der Download-Seite das Plugin benutzt, verändert und weitergegeben werden darf.