So stellen Sie Mediainhalte elegant dar

Lightbox-Effekt: Bilder und Videos eleganter präsentieren

Kaum eine Layout-Technik verbreitet sich derzeit so rasant wie der Lightbox-Effekt. Nutzen Sie ihn zur professionellen Anzeige vor allem von Grafiken und Videos.

Bilder und Videos eleganterpräsentieren

© Archiv

Bilder und Videos eleganterprä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:

<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" />

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:

<a href="ordner/bildklein.jpg" rel="lightbox"><img src="ordner/bildgross.jpg"></a>

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:

<a href="ordner/001gr.jpg" rel="light box[gruppe1]"><img src="ordner/001kl.jpg"></a>

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.

Bilder und Videos eleganterpräsentieren

© Archiv

Bei Preloaders.net erzeugen Sie online eine individuelle Ladegrafik.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".