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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…