Lightbox-Effekt: Bilder und Videos eleganter präsentieren

Immer mehr Websites zeigen Fotos, Filme und andere Seiteninhalte in der Lightbox-Ansicht an. Durch das Anklicken eines Links oder eines Vorschaubildes wird die jeweilige Webseite abgedunkelt und ein Bild, Video oder Text überlagert sie mit einem Transparenz-Effekt. Es gibt zahlreiche Skripts, mit denen sich das Präsentationsfeature ohne großen Aufwand einbauen lässt. Technisch setzen die Lösungen auf gängigen Frameworks wie den Mootools (), Prototype () oder jQuery () auf. Auch wenn die verschiedenen Skripts vergleichbare Ergebnisse liefern, steckt der Teufel wie immer im Detail.

So unterscheiden sich die Anwendungen im Speicherbedarf und beim Funktionsumfang. Manche Lightbox-Tools lassen lediglich einzelne Grafiken in den Vordergrund treten, andere bieten eine zusätzliche Blätterfunktion für Galerien. Bei zunehmender Verbreitung multimedialer Inhalte sind zudem Skripts gefragt, die Videos und Flash-Inhalte mit Transparenz-Effekt abspielen. Wir stellen Ihnen für den jeweiligen Einsatzzweck optimierte Lightbox-Lösungen vor und zeigen, worauf Sie beim Einbau achten sollten.

Der Klassiker

Der Urvater vieler Lightbox-Lösungen ist Lightbox JS von Lokesh Dhakar. Das Skript nutzt die Javascript-Bibliotheken Prototype und Scriptaculous (). Bei der weiterentwickelten Version Lightbox 2 () unterstützt es neben einzelnen Grafiken auch Bilderserien, die sich über Navigationstasten blättern lassen. Zudem fahren die Fotos im Lichtkasten mit einem eleganten Effekt langsam in der Höhe und der Breite aus. Dies verleiht der Bildpräsentation Dynamik.

Die Lightbox-Funktion lässt sich sehr schnell in die eigenen Seiten einbauen. Fügen Sie die folgenden Zeilen in den head-Bereich Ihrer Webseite ein:

Passen Sie die Pfade der Skriptfiles und der CSS-Datei gegebenenfalls an. Erstellen Sie mit einer Grafiksoftware eine mittelgroße und eine kleine Version des jeweiligen Einzelbildes oder aller Grafiken einer Galerie. Aktivieren Sie beim Verkleinern eine Methode, die je nach Programm mit Smart, Intelligent oder Bilinear/Bikubisch bezeichnet ist. Gleichen Sie die Qualitätsverluste der Skalierung aus, indem Sie die verkleinerten Bilder mit der entsprechenden Funktion Ihrer Bildsoftware nachschärfen.

Ein einzelnes Bild verlinken Sie nach dem folgenden Muster im Lightbox-Stil:

Der Parameter rel="lightbox" sorgt für den Aufruf des Effekts. Mehrere Bilder fassen Sie mit einem zusätzlichen Gruppennamen, den Sie in eckigen Klammern ergänzen, zu einer Galerie zusammen. Erweitern Sie den Code dazu wie folgt:

Sie starten das Lightbox-Album, indem Sie eines der Vorschaubilder auf der Webseite anklicken. Sobald Sie die Maus zum jeweiligen Rand der Lightbox führen, erscheinen Buttons zum Vor- und Zurückblättern. Mit dem Parameter title beim a-Tag fügen Sie Untertitel zu den Grafiken hinzu.

Sprache und Ladegrafik

Die Dokumentation des Skripts Lightbox 2 beschreibt lediglich die Installation. Es lassen sich jedoch auch diverse Anpassungen vornehmen. Ersetzen Sie beispielsweise die englische Beschriftung der Navigationsschaltflächen durch deutsche Texte. Bearbeiten Sie dazu die Buttons nextlabel.gif, prevlabel.gif und closelabel.gif mit Ihrem Bildbearbeitungsprogramm. Sie finden die Schaltflächen im Ordner images. Sämtliche Navigationsgrafiken in diesem Verzeichnis lassen sich zudem per Grafiksoftware an die Farbgebung Ihres Web-Angebots anpassen. Den Bildzähler Image x of y am unteren Rand jeder Galerieseite passen Sie über den Quelltext der Datei lightbox.js im Ordner js an. Weisen Sie den Variablen labelImage und labelOf im Abschnitt Configuration beispielsweise die Texte Seite und von zu.