Teil 3: Webdesign: CSS und Layer

Der Lightbox-Effekt

Im ersten Schritt laden Sie den fertigen Baukasten von der Lightbox-Website herunter und extrahieren die Dateien. Anhand der Beispielskripte bsp6.html und bsp6a.html sehen Sie, wie einfach das Skript in Ihre eigene Seite integrierbar ist.

Wenn Sie die Pfade nicht anpassen möchten, kopieren Sie am besten die Ordner js, css und images in das gleiche Verzeichnis, im dem sich auch die beiden HTML-Dateien befinden. Fügen Sie anschließend folgende Zeilen in den -Bereich Ihrer Webseite ein:

Sollten Sie die drei Ordner an eine andere Stelle kopiert oder diese umbenannt haben, so passen Sie die Pfadangabe entsprechend an.

Die Toolbox bietet Ihnen nun zwei Optionen an: es wird nur das Bild, welches Sie aktuell angeklickt haben, hervorgehoben und Sie müssen für die Anzeige des nächsten Bildes das Fenster wieder schließen und dieses anklicken. Die zweite Alternative ermöglicht Ihnen den Start einer Diashow; Sie können zwischen den Bildern hin und her navigieren, wobei das angeklickte Bild den Startpunkt darstellt.

Für die erste Option fügen Sie in das Anchor-Tag den Zusatz rel="lightbox" ein, sodass die Verlinkung am Beispiel Jürgen Klinsmann wie folgt aussieht:

Im zweiten Fall wird das Attribut rel erweitert und Sie können für die zusammenhängenden Bilder eine Gruppe bilden, zwischen der Sie wie beschrieben navigieren können. Den Gruppennamen können Sie frei wählen - in unserem Beispiel haben wir "expertenrunde" gewählt.