Viele Seiten setzen sie schon ein:
Lightbox JS oder
Lightbox JS 2.0 von Lokesh Dhakar. Mit diesem kleinen aber feinen Javascript kann man ohne große Einarbeitung Bilder in einer etwas anderen Form präsentieren. Über den Klick auf einen Link wird das anzuzeigende Bild innerhalb des Browser-Fensters sozusagen "über" der Seite in einem virtuellen Fenster angezeigt.
Alles ganz schön. Auch ich setze Lightbox seit nun mehr knapp einem Jahr ein. Was aber, wenn nicht nur Bilder, sondern auch
HTML oder andere Objekte wie Flash derartig präsentiert werden sollen? Lightbox kann leider nur mit Bildern umgehen...
Die Antwort hat Cody Lindley mit
Thickbox entwickelt. Das Ganze funktioniert ähnlich wie Lightbox, mit dem kleinen Unterschied, dass Cody 4 verschiedene Quellen für seine virtuellen Fenster anbietet: Bilder bzw. zusammenhängende Bildergalerien, der Inhalt eines HTML-Bereichs der aktuellen Seite (
Inline-Content), externe Quellen (
Iframed-Content) und Web-Seiten aus dem eigenen Web (
AJAX-Content).
Die Einbindung einer Thickbox für ein Bild in den eigenen HTML-Code ist denkbar einfach. Einem Anchor-Element (a) wird die Klasse "thickbox" zugewiesen und das HREF-Attribut zeigt auf die Bilddatei... Fertig. Die anderen Quellen sind ähnlich simpel zu implementieren. Hier muss jedoch beim HREF auf eine spezielle Syntax geachtet werden, die allerdings keinen Webmaster überfordern dürfte. Mehr dazu auf den
Demo-Seiten von Thickbox.
Das in den Quellcode einzubindende Javascript ist sehr übersichtlich geschrieben, was auch daran liegt, dass Cody sich des Javascript-Frameworks
Jquery von John Resig bedient. Jquery ist eine Bibliothek ähnlich wie Prototype (auf dem u.a. Lightbox 2.0 basiert), sie ist jedoch nicht annähernd so komplex. Jquery-Code ist sehr intuitiv zu implementieren.
Für die alte Version
zerbit.de hatte ich das Thickbox-Script etwas angepasst. So gefiel mir persönlich nicht, daß bei Bildern der Titel unter dem Bild platziert wird und nicht wie bei allen anderen Quellen am oberen Rand. Weiterhin habe ich das Script über Konstanten mehrsprachig gemacht, denn die Bezeichnungen sind im Original hard-coded englisch. Zu guter Letzt habe ich noch den Schließen-Button oben rechts durch ein entsprechendes GIF-Bild ersetzt. Für Interessierte hier die ZIP-Datei:
thickbox_zerbit.zip.
Man muss bei der Verwendung von Thickbox jedoch anmerken, dass Jquery- und Prototype-basierte Javascript-Frameworks sich etwas beißen, werden sie auf einer Seite zusammen geladen. Dies liegt an der ähnlichen Umsetzung der $-Funktionen. Man muss sich also entscheiden, ob man auf einer Seite Lightbox 2.0 oder Thickbox einsetzt.