Die letzte Woche habe ich ein paar Abende damit verbracht eine kleine Photo-CD zu erstellen, auf denen ich den Teilnehmern einer Studienreise die Photos kredenze, die die unterschiedlichen Mitfahrer geknipst haben. Das hat durchaus Spass gemacht.

Unter wollte ich zum Anzeigen der Photos in Originalauflösung diese nette Bild-Anzeige-Javascript-Ajax-Gedöns-Geschichte Lightbox JS verwenden. Das sieht ja sehr hübsch aus und funktioniert idR auch ganz prima.

Allerdings habe ich die ganze Präsentation so erstellt, dass die ganzen Inhalte nur per Javascript/Ajax nachgeladen werden. Nun arbeitet diese Lightbox-Geschichte allerdings so, dass sie beim Initialisieren alle a-Tags indiziert und kontrolliert, ob das entsprechende Tag über das Attribut rel="lightbox" verfügt. Das Initialisieren erfolgt eben beim ersten Laden der Seite.

Somit kann das Script gar nicht die Inhalte erfassen, die ich später per Ajax nachlade. Zu eben diesem Nachladen verwende ich eine ganz einfache Funktion (dei ich mal vor Urzeiten aus irgendeinem Tutorial übernommen habe):

function ajaxManager() {
 var args = ajaxManager.arguments;
 switch (args[0]) {
	case "load_page":
		if (document.getElementById) {
			var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); 
		}
		if (x) {
			x.onreadystatechange = function() {
			if(x.readyState == 4 && 200 == 200) {
				el = document.getElementById(args[2]); 
				el.innerHTML = x.responseText;
			}
		}
		x.open("GET",'./'+args[1],true); 
		x.send(null);          
		}
		break; 
	    // ... gekürzt
	}

Im ersten Schritt habe ich einfach den Lightbox-Initialisierungsaufruf am Ende der Funktion eingesetzt. Das bringt aber leider gar nicht, da die Funktion dann aufgerufen wird, bevor der neue Inhalt gerendert wurde. Hier kommt dann die praktische Javascript-Funktion setTimeout() ins Spiel, die es ermöglicht, dass man eine Funktion mit einem Delay von n Millisekunden nach dem eigentlichen Aufruf ausführen lassen kann.

Das Script habe ich dann wie folgt geändert:

		x.send(null);          
		}
		break; 
	    // ... gekürzt
	setTimeout('initLightbox()',500);
	}

500 Millisekunden nach dem Aufruf wird das Lightbox-Script initialisiert. Innerhalb dieses Zeitraums ist auf jeden Fall der Inhalt der CD nachgeladen worden und die Lightbox-Routine findet dann auch brav das entsprechende a-Tag, was ich nachladen liess.