Lightbox JS v2.0.4 (deutsch)

Original von Lokesh Dhakar

Deutsche Übersetzung von Tim Böttiger

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

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

Beispiel

Ein einzelnes Bild:

Eine Galerie: (Mit Title-Tags)

Und so gehts:

Schritt 1 - Einbindung

  1. Lightbox v2.0.4 basiert auf dem Prototype Framework und der Scriptaculous Effects Bibliothek. Du musst alle drei Javascript-Dateien im Header-Bereich einbinden.
    <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>
    
  2. Binde die Lightbox CSS Datei ein (oder ergänze Dein eigenes Stylesheet mit den Lightbox-Styles).
    <link rel="stylesheet" href="css/lightbox.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 oben in der lightbox.js Datei verlinkt sind.

Schritt 2 - Aktivierung

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