Eine Lightbox verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Der gegenwärtig angezeigte Inhalt einer Webseite soll mit einem Bild in einer sogenannten Lightbox überlagert werden (siehe folgende Abbildung), ohne dass hierfür ein Popupfenster im Browser geöffnet werden muss.

Website in der Standarddarstellung

Abbildung: Die Seite in der Standarddarstellung.

Lösung

Verwenden Sie für den Lightbox-Effekt ein spezielles JavaScript.

Neben den JavaScript-Bibliotheken Prototype und Script.aculo.us enthält der Code ein spezielles Skript für das Überlagern von Bildern:

<title>Mr. McCool's Homepage</title>
<!-- Struktur für den Lightbox-Effekt -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<!-- Skript für die Lightbox einbinden -->
<script type="text/javascript" src="lightbox.js"></script>

Danach binden Sie das Stylesheet ein, das die Darstellung des Überlagerungseffekts steuert:

<title>Mr. McCool's Homepage</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

Innerhalb der Seite erstellen Sie einen Link auf das Bild, das überlagert dargestellt werden soll. Hierbei erhält das a-Tag ein zusätzliches Attribut rel mit dem Wert lightbox. Meistens wird bei diesem Verfahren ein Thumbnail mit einem Link umgeben, wie unten zu sehen ist:

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off his happy shoes."><img src="trammell_shoes_tn.jpg" alt="Mark Trammel is happy with his shoes." /></a>

Klickt der Benutzer auf den Link, wird der Lightbox-Effekt aktiviert (siehe nächste Abbildung).

Lightbox wird angezeigt und überlagert dabei Standardseite

Abbildung: Die Lightbox wird angezeigt und überlagert dabei die Standardseite.

Diskussion

Der Lightbox-Effekt basiert auf zwei JavaScript-Basisbibliotheken: dem Prototype-Framework und der Script.aculo.us-Bibliothek.

Das Prototpye-Framework ist eine objektorientierte Bibliothek, mit der Entwickler schnell auf JavaScript basierende Webapplikationen erstellen können. Weitere Informationen zu Prototype finden Sie im Internet.

Script.aculo.us ist eine Sammlung von JavaScript-Bibliotheken. Werden diese zusammen mit Prototype verwendet, können Entwickler dynamische Ajax-(Asynchronous JavaScript and XML-)Interaktionen erstellen.

Basierend auf diesen Grundlagen entwickelte der Webentwickler Lokesh Dhakar eine Möglichkeit, Bilder darzustellen, ohne hierfür die Seite mit den Thumbnail-Bildern verlassen zu müssen.

Die Dateien einrichten

Wenn Sie die JavaScript-Datei und das Stylesheet in die Webseite einbinden, müssen Sie sicherstellen, dass die Dateien korrekt verlinkt sind. Wenn Sie JavaScript- und CSS-Dateien in unterschiedlichen Verzeichnissen speichern (in unserem Beispiel liegen die JavaScript-Dateien im Verzeichnis js, die CSS-Dateien im Verzeichnis css, beide Verzeichnisse wurden ihrerseits im Ordner _assets abgelegt), muss dies sich auch beim Einbinden des Codes widerspiegeln.

<script type="text/javascript" src="/_assets/js/prototype.js"></script>
<script type="text/javascript" src="/_assets/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/_assets/js/lightbox.js"></script>
<link rel="stylesheet" href="/_assets/css/lightbox.css" type="text/css" media="screen" />

In der Lightbox-JavaScript-Datei müssen Sie die Pfade zu den Bildern ebenfalls anpassen. Die anzupassenden Codezeilen finden Sie am Anfang der JS-Datei (hier liegen die Bilder im Verzeichnis img unterhalb des Ordners _assets):

var fileLoadingImage = "/_assets/img/loading.gif";
var fileBottomNavCloseImage = "/_assets/img/closelabel.gif";

Das Stylesheet für die Lightbox verwendet dreimal die Bildeigenschaft background. Auch hier müssen Sie darauf achten, dass die Pfade zu Bilddateien korrekt gesetzt sind:

#prevLink, #nextLink {
 width: 49%;
 height: 100%;
 /* Trick IE into showing hover */
 background: transparent url(/_assets/img/blank.gif) no-repeat;
 display: block;
}
#prevLink:hover, #prevLink:visited:hover {
 background: url(/_assets/img/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
 background: url(/_assets/img/nextlabel.gif) right 15% no-repeat;
}

Diaschauen

Neben der einfachen Darstellung von Einzelbildern kann die Lightbox auch so eingerichtet werden, dass eine Diaschau angezeigt wird, wie in folgender Abbildung gezeigt.

Lightbox kann auch Diaschau aus mehreren Bildern darstellen

Abbildung: Die Lightbox kann auch eine Diaschau aus mehreren Bildern darstellen.

Für diesen Effekt müssen Sie den Wert des rel-Attributs so erweitern, dass nach dem Wert lightbox der Name einer Galerie in eckigen Klammern folgt. Weil ich die Bilder in Austin, Texas aufgenommen habe, heißt die Galerie in diesem Beispiel entsprechend austin:

<ul>
  <li><a href="trammell_shoes.jpg" rel="lightbox[austin]" title="Trammell shows off his happy shoes."><img src="trammell_shoes_tn.jpg" alt="Mark Trammell is happy with his shoes." /></a></li>
  <li><a href="molly_andy.jpg" rel="lightbox[austin]" title="Molly and Andy pose for a shot."><img src="molly_andy_tn.jpg" alt="Molly and Andy pose for a shot." /></a></li>
  <li><a href="msjen.jpg" rel="lightbox[austin]" title="Ms. Jen at breakfast."><img src="msjen_tn.jpg" alt="Ms. Jen at breakfast." /></a></li>
</ul>

Alle Bilder, die gemeinsam in einer Diaschau gezeigt werden sollen, müssen den gleichen Galerienamen verwenden.

Bekannte Browserprobleme

Damit der Lightbox-Effekt funktioniert, müssen die Browser das Prototype-Framework unterstützen. Beim Schreiben dieses Buches funktionierte Prototype mit den folgenden Browsern:

  • Microsoft Internet Explorer für Windows 6+
  • Mozilla Firefox 1.0+
  • Mozilla 1.7+
  • Apple Safari 1.2+

Benutzer, deren Browser den Lightbox-Effekt nicht unterstützen, sind jedoch nicht ausgeschlossen. In diesem Fall folgt der Browser einfach dem Link im Attribut href.

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off his happy shoes."><img src="trammell_shoes_tn.jpg" alt="Mark Trammel is happy with his shoes." /></a>

In diesem Beispiel zeigt der Browser das Bild mit dem Namen trammel_shoes.jpg in der Lightbox.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln