Beispiel

Ein einzelnes Bild:

Eine Galerie: (Mit Title-Tags)

Und so gehts:

Schritt 1 - Einbindung

1. Slimbox v1.4 basiert auf dem mootools-Framework. Du musst beide Javascript-Dateien im Header-Bereich einbinden.

   <script type="text/javascript" src="js/mootools-1.11.js"></script>
   <script type="text/javascript" src="js/slimbox.js"></script>

2. Binde die Slimbox CSS Datei ein (oder ergänze Dein eigenes Stylesheet mit den Slimbox-Styles).

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

3. Überprüfe das CSS und stelle sicher, dass die eingebundenen Dateien prevlabel.gif, nextlabel.gif, loading.gif und closelabel.gif im richtigen Ordner liegen.

Schritt 2 - Aktivierung

1. Füge ein rel="lightbox" Attribut zu jedem Link-Tag hinzu, um den Slimbox-Viewer zu aktivieren. Zum Beispiel:

   <a href="images/image-1.jpg" rel="lightbox" title="Mein Titel">Bild #1</a>

   Optional: kannst Du das title Attribut benutzen, um einen Titel zu hinterlegen.
2. Wenn Du eine Galerie aus verschiedenen zusammengehörigen Bildern hast, machs genauso wie im 1. Schritt füge aber noch einen Galerie-Namen in eckigen Klammern zum rel-Attribut hinzu. Zum Beispiel:

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">Bild #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">Bild #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">Bild #3</a>

   Die Anzahl der Bilder pro Galerie ist nicht begrenzt. Los gehts!