Lightbox-Skripte sind ein sehr gutes Mittel, um Grafiken vergrößert darzustellen. Da wundert es natürlich nicht, dass es unzählige Lösungen für diese Aufgab gibt. Image Lightbox ist eine dieser Lösungen, die sich die Markenzeichen Responsive und Touch-Freundlich auf die Fahne schreibt.

Der Macher von Image Lightbox fühlte sich erschlagen von der Vielfalt der Lösungen und der Vielzahl von Lösungen für Probleme, die in seinen Augen nicht existierten. Standardfunktionen, die unnötiges Gewicht für die Lightbox mit- oder das komplette Markup durcheinander brachten, inspirierten ihn dazu, Image Lightbox zu schreiben. Das Ergebnis ist eine schlanke Lightbox, die genau das tut, was eine Lightbox in der Basisversion tun soll: Bilder darstellen.

Image Lightbox bietet ein sehr minimalistisches Design, das den Betrachter nicht vom eigentlichen Motiv ablenken soll. Per Default liefert die Lightbox keine Buttons, Navigationselemente oder Überschriften – all das kann jedoch bei Bedarf hinzugeschaltet werden. Außerdem ist eine Steuerung mit den Pfeiltasten der Tastatur möglich. Auf Touch-Geräten ist darüber hinaus das Durchblättern von Bildern mit Wischgeste möglich.

Die nur vier Kilobyte große Lightbox bringt eine minimale Zusatzbelastung in das Projekt und schafft es durch den Verzicht auf externe Grafiken schlank zu sein und dabei auch für Retina-Geräte gestochen scharfe Ergebnisse zu liefern. Anders als andere Lightbox-Lösungen wurde hier auch an die Performance gedacht: Die großen Versionen der Bilder werden nur geladen, wenn sie tatsächlich gebraucht werden. Eine clevere Preload-Funktion lädt außerdem das nächste Bild vor, sodass eine gefühlte Verbesserung bei der Nutzung – insbesondere auf mobilen Geräten – erzielt werden kann.

Für die Nutzung von Image Lightbox benötigst du kein kompliziertes Markup. Ein Thumbnail-Bild und ein Link zur großen Version des Bildes reichen hierbei vollkommen aus:

<a href="grosses-bild.jpg">
<img src="thumbnail.jpg" class="lightbox">
</a>

Binde das Lightbox-Skript in dein Projekt ein und initiiere es. Schon ist deine Lightbox fertig.

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$( function(){
$( 'a.lightbox' ).imageLightbox();
});
</script>

Mit einer Reihe von Parametern kannst du verschiedene Einstellungen für die Lightbox wie die Animationsgeschwindigkeit und die Preload-Funktion konfigurieren. Mit verschiedenen Event-Listenern kannst du außerdem zusätzliche Funktionen für diverse Vorgänge in der Lighbtox, wie beispielsweise das Beenden eines Ladevorgangs, definieren, sodass verschiedene Erweiterungsmöglichkeiten einfach implementiert werden können.

Image Lightbox verlässt sich auf jQuery, ist aber mit den Versionen 1.x und 2.x kompatibel und funktioniert laut Hersteller in aktuellen Fassungen von Safari, Chrome, Firefox, Opera und Internet Explorer sowie iOS, Android und Windows Phone Browsern. Auf der offiziellen Seite von Image Lightbox erfährst du mehr über das kostenlos erhältliche Skript.