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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…