Lightbox Installation - Deutsche Übersetzung

[paul_le]

Da es immer wieder Fragen zur Installation von Lightbox gibt, hier mal die englische Anleitung und deutsche Übersetzung. Nachdem die Dateien als Zip heruntergeladen sind, müssen diese zunächst auf der Festplatte entpackt werden. Danach gilt es, die neuen Dateien mit den vorhandenen HTML-Seiten zu verknüpfen und diese entsprechend Part 1 & Part 2 zu aktualisieren. Nach erfolgter Aktualsierung müssen alle neuen und geänderten Dateien wieder auf den Server geladen werden. Wichtig: Die häufigste Fehlerquelle sind falsche Referenzierungen, d.h. achtet auf korrekte Pfade, sonst werden Bilder nicht angezeigt, b.z.w. Lightbox funktioniert schlicht nicht.

Download Lightbox2


Part 1 - Setup

1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

<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. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

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

3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

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

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

DEUTSCHE ÜBERSETZUNG

Part 1 - Installation

1. Lightbox 2 nutzt das Prototype Framework und die Scripteffekt Bibliothek. Binde die folgenden drei Javascript Dateien in den Header Deiner Seite ein (in dieser Reihenfolge).

<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 in deine Seite ein (oder erweitere dein aktives Stylesheet mit den Styleangaben für Lightbox).

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

3. Prüfe deine CSS-Datei und versichere Dich, dass die referenzierten Bilddateien prev.gif and next.gif im richtigen Ordner liegen. Versichere Dich ebenfalls dass die in der Datei lightbox.js referenzierten Datein loading.gif und close.gif im richtigen Ordner liegen, bz.w. der Pfad stimmt.

Part 2 - Aktivieren

1. Ergänze jeden Bildlink um ein a rel="lightbox" um Lightbox zu aktivieren. Zum Beispiel:

<a href="bilder/bild1.jpg" rel="lightbox" title="Überschrift">Bild #1</a>

Optional: Nutze das title attribute, wenn Du eine Überschrift anzeigen möchtest.

2. Bei einer Gruppe zusammenhängender Bilder, gehe wie in Schritt 1 vor und ergänze einen Gruppennamen zwischen zwei eckigen Klammern innerhalb des rel-Attributes. Zum Beispiel:

<a href="bilder/bild1.jpg" rel="lightbox[roadtrip]">Bild #1</a> <a href="bilder/bild2.jpg" rel="lightbox[roadtrip]">Bild #2</a> <a href="bilder/bild3.jpg" rel="lightbox[roadtrip]">Bild #3</a>

Es sind keine Beschränkungen bezüglich Bildergruppen oder der Anzahl der darin vorhandenen Bilder vorhanden. Go nuts!