Hyperlinks 2.0

Teil 3: Webdesign: CSS und Layer

5.8.2008 von Redaktion pcmagazin und Andreas Hitzig

ca. 1:35 Min
Ratgeber
  1. Webdesign: CSS und Layer
  2. Teil 2: Webdesign: CSS und Layer
  3. 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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.