Hyperlinks 2.0

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:

<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><link rel="stylesheet" href="css/
lightbox.css" type="text/css" media="screen" />

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:

<a href="klinsmann.jpg" rel=
"lightbox"><img src="klinsmann.jpg"width="180" height="130" /></a>

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.

<a href="klinsmann.jpg" rel=
"lightbox[expertenrunde]"><img src="klinsmann.jpg" width="180" height="130" /></a>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".