1. Was ist die Lightbox?

Die Lightbox sorgt dafür, dass Bilder sich, beim Klick auf ein Thumbnail oder einen Link, mit einer netten kleinen Animation über der aktuellen Seite öffnen. Am besten ihr schaut euch die Beispiele hier mal an: Klick!

Ihr könnt dabei aussuchen welche Bilder mit der Lightbox geöffnet werden sollen und sogar kleine Galerien erstellen, die man wie eine Diashow abspielen kann.

2. Download des Skripts

Ladet euch die .zip-Datei auf der Lightbox Webseite herunter oder klickt hier.

3. Entpacken und Hochladen

Entpackt nun die .zip-Datei und ladet den gesamten Inhalt, so wie er ist, auf euren Webspace. Wichtig hierbei ist, dass ihr nichts aus den Ordnern in andere Ordner verschiebt, sonst müsst ihr nachher beim Einbinden die Pfade entsprechend abändern.

4. Einbinden der Dateien

In euren Header müsst ihr nun die drei Javascripte einbinden, die im Ordner /js/ liegen:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Und die CSS Datei für die Lightbox darf natürlich auch nicht fehlen:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Alternativ könnt ihr auch den Inhalt der Lightbox CSS in eure vorhandene CSS Datei einfügen. Klappt beides.

5. Die Lightbox aufrufen

Um die Lightbox aufzurufen, müsst ihr einfach nur den entsprechenden Link mit einem rel="lightbox" versehen:

<a href="URL zu eurem Bild" rel="lightbox" title="Bild Überschrift">Bild 1</a>

Klickt ihr nun auf den Link, öffnet sich die Lightbox mit dem verlinkten Bild. Was bei title="" steht wird als Bildüberschrift in der Lightbox angezeigt.

Natürlich könnt ihr auch Bilder verlinken, z.B. Thumbnails oder Ähnliches:

<a href="URL zu eurem Bild" rel="lightbox" title="Bild Überschrift"><img border="0" src="URL zum Bild" alt="Bildname"/></a>

6. Galerien und Gruppen

Um mehrere Bilder zu einer Gruppe/Galerie zusammen zu fassen, schreibt ihr einfach den Namen der Galerie in eckigen Klammern in das rel-Attribut:

<a href="URL zu eurem Bild" rel="lightbox[Meine Galerie]" title="Bild Überschrift">Bild 1</a>
<a href="URL zu eurem Bild" rel="lightbox[Meine Galerie]" title="Bild Überschrift">Bild 1</a>
<a href="URL zu eurem Bild" rel="lightbox[Meine Galerie]" title="Bild Überschrift">Bild 1</a>

Diese Bilder gehören nun alle zur Galerie "Meine Galerie" und beim Aufrufen eines Bildes, kann zu den nächsten Bildern weiter geschaltet werden.

Und fertig!