Ajax / Javascript Tutorial: Lightbox JS v2.0 einbinden.

+8   19   |   Bewertung: Keine Berechtigung!  

Vorwort

---

Hallo,

mit diesem Tutorial möchte ich kurz auf deutsch erklären, wie man das Lightbox JavaScript v2.0 für seine Webseite nutzen kann.

Schritt 1

---

Abb.1Lightbox JS v2.0 ist ein einfaches Javascript das benutzt wird, um Bilder auf der aktuellen Seite zu überlagern und schön darzustellen.

Es ist einfach zu Installieren und funktioniert mit allen modernen Browser.

Was in Version 2.0 neu ist:

- Bilder-Sets: in Verbindung stehende Bilder gruppieren und durch sie mit Mühelose steuern.
- Effekte: Fliesende übergänge.

Schritt 2

---

Abb.2Als erstes ladet Ihr euch das Javascript hier runter:

http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip

Schritt 3

---

Abb.3Nun kopiert Ihr in diesen Code in euren Header:

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

Zusätzlich müßt Ihr noch die CSS-Datei von Lightbox JS v2.0 in eurer Seite laden.
Das geht am einfachsten indem Ihr einfach diesen Code mit in euren Header kopiert:

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

Schritt 4

---

Abb.4Um Lightbox JS v2.0 nun zu nutzen, müßt Ihr bei den Bildern, die Ihr mit dem Effekt nutzen wollt, das Attribut rel="lightbox", in den Link der Bilder, einfügen.

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

Um die Funktion der Bilder-Sets zu nutzen, ändert Ihr das Attribut einfach in rel="lightbox[roadtrip]". Damit kann jedes Bild, auf der geladen Seite, mit diesem Attribut angeschaut werden, ohne Lightbox JS v2.0 schließen zu müssen.

Hier ein Beispiel:

<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>

Es gibt kein Limit wieviele Bilder Ihr für diese Sets nutzt.

Schritt 5

---

Abb.5So Lightbox JS v2.0 sollte es nun bei euch auf der Webseite funktionieren.

Es kann jetzt noch zu Fehlern in der Anzeige von den Bildern vom Lightbox JS v2.0 selber kommen. Um diese zu beheben müßt Ihr einfach in der CSS-Datei die Pfade der Bilder anpassen!

blank.gif findet Ihr in Zeile 48.
prevlabel.gif und nextlabel.gif findet Ihr jeweils in Zeile 53 und 54.

Viel Spaß mit dem ganzem.

MfG
elNinO