WP-Plugin: Lightbox JS

WordPress Plugin: Lightbox JS | Download
Funktion: Bild-Zoom (nach Klick auf Thumbnail wird Bild via CSS und Javascript über die aktuelle Seite gelegt)

Lightbox JS bietet die bisher wohl eleganteste Methode für den Einbau großformatiger Bilder in Webpages. Jeder Template-Designer kennt das Problem: nach dem Klick auf das Thumbnail-Bild muss die vergrößerte Version dargestellt werden – aber wie? Seiten mit mehreren Content-Spalten weichen oft auf ein neues Fenster oder gleich ein Pop-Up Windows aus – eine Lösung, die viele User nicht als ideal empfinden. Lightbox geht einen völlig anderen Weg: via CSS und Javascript wird die großformatige Ansicht des Bildes als neuer Layer mit transparentem Rahmen über die Seite gelegt. Schnell populär in der WordPress-Blogging Szene wurde Lightbox JS durch die Verwendung beim WordPress.org – und wer das Script zum ersten Mal in Action sieht, der staunt in der Regel erstmal darüber, was mit modernen Browsern ohne Flash so alles möglich ist.

Was in der Beschreibung noch relativ kompliziert klingt, offenbart in der Praxis sofort seine Vorteile. Kein Back, kein neues Fenster, jedes beliebige Layout bleibt erhalten – Obergrenze für die Bildmaße ist damit nur mehr die avisierte Bildschirmauflösung. Auf datenschmutz verwende ich die Lightbox (der Name stammt übrigens aus der Fotografen-Sprache: der Analog-Fotograf kennt die „Durchlicht-Box“ als Hilfsmittel beim Betrachten von Dias oder Negativen) für alle eingebundenen Bilder – für eine Demo einfach einen Blick ins Fotoalbum werfen.

Man möchte meinen, dass die Lightbox sehr wählerisch ist, was unterstützte Software betrifft – keineswegs! Von Opera über Firefox bis zum unaussprechlichen M$-Browser kommen alle modernen Surfhelfer mit dem Script zurecht. Gezoomt werden alle Web-Image-Files, also Gif-, JPEG- und PNG-Dateien. Dann muss zumindest der Einbau kompliziert sein, denkt sich der skeptische Web 2.0 erfahrene Bastler. Wiederum: njet. Der Einbau ist kinderleicht, weil einfach nur ein simples Javascript in den Header der Seite eingebunden wird. Anschließend erhalten alle Image-Links (also a href’s, die auf Bilder zeigen) das zusätzliche Argument

rel="lightbox"

Und das war’s auch schon! Der Autor bezeichnet sein Script also zu recht als „einfach einzubauen und hoch kompatibel“:

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Tatsächlich dauert der Einbox von Lightbox JS in eine bestehende Seite nur wenige Minuten – für WordPress User gibt’s allerdings sogar schon ein fertiges Plug-In, das jegliche händische Manipulation am Header erspart und außerdem einen Button in den Editor (nur im Code-Editing-Mode verfügbar!) einfügt, mit dem sich menügeführt die richtigen Imagelinks erstellen lassen. Trotz der gekapselten Funktionsweise lässt sich das Ergebnis sehr leicht an die eigenen Wünsche anpassen – dazu ist dann allerdings ein genauerer Blick in die mitglieferten Stylesheets nötig, mit denen Lightbox JS bis ins Details an die eigenen optischen Präferenzen angepasst werden kann.

Das beliebte mygallery-Plugin (wird in Kürze hier vorgestellt) bringt Lightbox schon von Haus aus mit und implementiert zusätzlich eine Previous/Next Funktion in der Großansicht der Bilder.

Heimat des Lightbox Scripts ist Huddletogether.com:

Das Plug-In für WordPress hat Safirul Alredha geschrieben:
http://zeo.unic.net.my/notes/wp-lightbox-js-wordpress-plugin/