Teil 2: Lightbox-Effekt: Bilder und Videos eleganter präsentieren

Auch die animierte Grafik, die während des Ladevorgangs der Großansicht angezeigt wird, lässt sich ersetzen. Überschreiben Sie dazu entweder die Datei loading.gif mit einer anderen Animation oder ändern Sie den Namen bei fileLoadingImage in der genannten Javascript-Datei. Generatoren, mit denen sich individuelle Pausenfüller online erzeugen lassen, finden Sie beispielsweise unter und unter . Wählen Sie eine Grundgrafik aus und passen Sie die Farben für den Vordergrund und den Hintergrund an. Bei Preloaders.net lässt sich außerdem die Geschwindigkeit der Animation einstellen.

Aber Vorsicht: Je größer und langsamer Sie die Grafik anlegen, umso schlechter wird die Qualität.

Navigation und Transparenz

Da die Navigationsbuttons in der Galerie nur angezeigt werden, wenn man die Maus zum Rand des jeweiligen Bildes bewegt, erkennt nicht jeder Nutzer auf einen Blick, dass man in der Lightbox blättern kann. Wollen Sie hier sichergehen, so blenden Sie die Schaltflächen permanent ein. Bearbeiten Sie dazu die Datei lightbox.css im Ordner css. Fügen Sie die background-Eigenschaften von #prevLink:hover und #nextLink:hover jeweils auch zu #prevLink und #nextLink hinzu.

Standardmäßig dunkelt das Skript die Seite im Hintergrund stark ab. Die Inhalte bleiben etwas heller, wenn Sie der Variablen overlayOpacity in der Datei lightbox.js einen niedrigeren Wert zuweisen. Eine 50-prozentige Transparenz erzielen Sie beispielsweise mit dem Wert 0.5. Die Ausklappgeschwindigkeit stellen Sie bei resizeSpeed ein. Erhöhen Sie den Wert beispielsweise auf 9, um die Inhalte der Lightbox schneller auszufahren.

Modale Version

Lightbox 2 bildet die Grundlage für zahlreiche Weiterentwicklungen, mit zusätzlichen Anzeigemöglichkeiten und modifizierter Funktionalität. Benötigen Sie ein spezielles Verhalten, müssen Sie das Skript daher in der Regel nicht selbst anpassen. Sie finden mit hoher Wahrscheinlichkeit eine Lösung, die Ihre speziellen Anforderungen erfüllt. Lightbox Gone Wild ([ext:https://particletree.com/features/ lightbox-gone-wild/][/ext]) bietet gegenüber der Basisversion beispielsweise zwei wesentliche Änderungen: Zum einen lassen sich in der Lightbox neben Bildern auch beliebige HTML-Bausteine wie beispielweise Fließtext und Formulare anzeigen, zum anderen richtet das Skript die Box modal ein.

Anders als bei Lightbox-Lösungen üblich lässt sich das Anzeigefenster nicht einfach schließen, indem Sie in die abgedunkelte Fläche neben das Anzeigeobjekt klicken. Die Nutzer müssen vielmehr einen bestimmten Link oder Button aktivieren, um zur darunterliegenden Seite zurückzukehren. Damit eignet sich die Lösung optimal für Web-Anwendungen, bei denen Sie das Verhalten der Surfer in vorgegebene Bahnen lenken wollen. Die präsentierten Inhalte legen Sie dabei jeweils in einer externen HTML-Datei ab. Die Klassen, mit denen sich das Öffnen und Schließen der Lightbox-Fenster steuern lässt, sind auf der Homepage des Anbieters ausführlich beschrieben. Ändern Sie über das Fenster die dahinter liegende Seite, so aktualisieren Sie diese nach der Rückkehr mit location.

reload(). Übrigens: Möchten Sie Lightbox Gone Wild mit der aktuellen Version Prototype 1.6 einsetzen, dann tauschen Sie die Datei lightbox.js gegen die aktualisierte Version, die bei joe.posterous.com/ lightbox-gone-really-wild zum Download bereitsteht.

Automatische Slideshow

Lytebox () setzt ebenfalls auf Lightbox 2 auf. Das Skript bietet zusätzlich zur per Maus bedienbaren Bildergalerie die Möglichkeit, eine automatisch ablaufende Slideshow einzurichten. Verwenden Sie beim Einbinden in Ihre Webseite das entsprechende Schlüsselwort lyteshow nach dem folgenden Muster: