thomaskekeisen.de
Aus dem Leben eines Bildschirmarbyters
Achtung: Diese Seite enthält Partner- und Werbe-Links. Daher ist diese Seite im Gesamten als Werbeanzeige zu verstehen!
Ausgangssituation
Als ich meine Seite entwickelt habe und gerade fertig war, habe ich bemerkt, dass es noch nicht möglich ist, auf Bilder zu klicken, um eine entsprechend größere Version anschauen zu können. Nach kurzer Recherche habe ich mich entschieden lightbox2.js zu verwenden.
Das Problem: ich habe mein gulp-Script so entwickelt, dass es alle Bibliotheken wie jQuery oder Bootstrap in eine Datei kopiert werden, sodass der Browser des Nutzers weniger einzelne HTTP-Anfragen stellen muss. Diese Datei binde ich im <head> -Bereich ein, was dazu führt, dass die zu klickenden Bilder noch nicht "geladen" sind, während der Javascript-Code schon ausgeführt wird. Und lightbox2.js wartet leider nicht darauf, bis der Browser das ganze HTML verarbeitet hat.
Die Lösung
Aus der Dokumentation von lightbox2.js geht leider nicht hervor, wie dieses Problem umgangen werden kann. Nach kurzer Sichtung des Quellcodes habe ich aber bemerkt, wie das Problem zu lösen ist. In Verbindung mit jQuery kann so auf den Browser respektive den <body> gewartet und im Anschluss lightbox2.js gestartet werden. Ein Beispiel kann auf meiner Sitemap gefunden werden.
$(document).ready(function() {
lightbox.init();
});