Es gibt viele Varianten des ursprünglichen Lightbox-Effekts der Bilder nicht in einem neuen Fenster oder Popup öffnet sondern in einer Ebene über der Seite einblendet, meist mit einem schicken Animationseffekt.

Eine auf jQuery basierende Variante und meiner Meinung nach die derzeit beste Lösung ist die ColorBox. Ähnlich der, nicht mehr weiterentwickelten, Thickbox ist die ColorBox nicht nur in der Lage Bilder in einer solchen Ebene über der Seite darstellen sondern auch iFrames zu laden, Flash-Videos anzuzeigen oder auch nur Text oder sonstige Informationen anzuzeigen.

Die ColorBox kommt mit fünf verschiedenen Styles die alle recht ansprechend sind und für die meisten Seiten passen. Natürlich lässt sich aber die Farbgebung und Gestaltung der Box mittels CSS und Bilddateien an die eigenen Vorstellungen anpassen. Zudem gibt es eine Vielzahl an Optionen mit denen das Verhalten der ColorBox beeinflusst werden kann. Angefangen bei der Übersetzung von Texten (bei anderen Effekten muss dazu teilweise die kryptische JavaScript-Datei bearbeitet werden) bis hin zur Festlegung von maximalen Größen – wer eine geringe Bildschirmauflösung hat wird sich sicher schon gelegentlich über Lightboxen geärgert haben, die größer waren als der eigene Bildschirm – bis hin zum Festlegen eines Slideshow-Effekts.

Der Grundlegende Einbau der ColorBox ist recht einfach. Natürlich muss jQuery ebenfalls geladen und eingebunden sein, anschließend müssen sowohl die JavaScript-Datei als auch die CSS-Datei der ColorBox im Head der Seite eingebunden werden.

<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />

Nun geht es darum den Effekt einzubauen. Das Beispiel unten setzt die maximale Breite und Höhe der ColorBox auf 95% wodurch die Box auch bei sehr großen Bildern nie größer angezeigt wird als der Monitor des Benutzers darstellen kann. Große Bilder werden dadurch kleiner dargestellt, was allerdings weit weniger störend ist als eine Ebene über der Seite zu haben bei der man im schlimmsten Fall nicht mehr an den Button zum Schließen kommt. Zudem wurden die Texte der Box ins Deutsche übersetzt.

<script type="text/javascript">
$(document).ready(function(){
	$("a[rel='colorbox']").colorbox({
		maxWidth:"95%",
		maxHeight:"95%",
		close:"schließen",
		next:"nächstes",
		previous:"vorheriges",
		current:"Bild {current} von {total}"
	});
});
</script>

Die Angabe a[rel='colorbox'] kann natürlich abgeändert werden um auf andere Kennzeichnungen, etwa bestimmte Klassen, zu reagieren. Für das Beispiel eignet es sich aber am besten. Nun fehlt nur noch die Einbindung von Bildern. Natürlich kann sowohl ein Text als auch ein Thumbnail zur Vorschau verwendet werden, wichtig ist, dass das eigentliche Bild verlinkt wird. Zudem muss natürlich die Kennzeichnung, im Beispiel als rel=”colorbox” in den Link integriert werden.

<a href="gross.jpg" rel="colorbox"><img src="thumbnail.jpg" alt="ColorBox" /></a>

Weitere Beispiele, auch für die Einbindung von anderen Inhalten als Bildern sind auf der Seite der ColorBox zu finden. Im Download-Paket sind zudem ausführliche und hilfreiche Beispiele enthalten.

ColorBox Website