Slimbox v1.65 (deutsch)

Original von Christophe Beyls, bitte wirf auch einen Blick in die entsprechende Google Group

Deutsche Übersetzung von Tim Böttiger

Die Datei, die Du gedownloaded hast, ist nicht die Orginal-Datei von Christophe. Es ist die deutsche Übersetzung.

Angepasst wurden hierfür die Grafiken für die Buttons "vor", "zurück" und "schliessen" sowie die index.html, die slimbox.js und die slimbox.css.

Beispiel

Ein einzelnes Bild:

Eine Galerie: (Mit Title-Tags)

Und so gehts:

Schritt 1 - Einbindung

1. Slimbox v1.65 basiert auf dem Mootools Framework. Du musst alle zwei Javascript-Dateien im Header-Bereich einbinden.

   
   <script type="text/javascript" src="js/mootools.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 und nextlabel.gif im richtigen Ordner liegen. Schau ausserdem noch nach den Pfaden der Dateien loading.gif und closelabel.gif die in der slimbox.css Datei verlinkt sind.

Schritt 2 - Aktivierung

1. Füge ein rel="lightbox" Attribut zu jedem Link-Tag hinzu, um Slimbox 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!