Ich bin immer noch am Rumwerkeln meines Online-Portfolios, nun allerdings nähert sich das Ganze zumindestens funktional der Fertigstellung oder einfach formuliert: es funzt alles. Was hat diese Geschichte nun so kompliziert gemacht?

Das Portfolio ist ein separater Blog in der gleichen Movable-Type Installation wie auch der Hauptblog hier oder der Linkblog. Mein Wunsch war es, so möglichst einfach das Portfolio verwalten zu können, ohne groß manuell neue Links setzen zu müssen, so wie bei der jetzigen Galerie.

Schreibe ich nun einen neuen Eintrag in den Portfolio-Blog, dann werden auch die Archive dieses separaten Blogs aktualisiert. Diese Archive hole ich mir dann mit Hilfe von AJAX in den Hauptblog hier. Dank Movable-Type kann ich das Portfolio sogar sehr einfach nach Kategorien verwalten und mit genau diesen Kategorie-Archiven arbeitet die Hauptseite.

Klickt der Besucher dann zum Beispiel den Link Non-Print, dann holt sich die Seite das Kategorie-Archiv Non-Print vom Portfolio-Blog und lädt es in die aktuelle Seite des Browsers. Soweit nicht allzu kompliziert. Probleme kamen, als ich das Lightbox-Skript zum Vergrößern der Portfolio-Bilder nutzen wollten.

Lightbox initialisiert sich beim Laden der Seite im Browser und kann dann genau mit den Inhalten arbeiten, die zu dieser Zeit vorhanden sind. Wenn ich nun mit AJAX die Kategorie-Archive in die Seite lade, dann ändern sich die Inhalte, aber Lightbox bekommt davon nichts mit und kann somit nicht damit arbeiten. Ein paar Google-Suchen später, brachten zwei Links Licht ins Dunkel, denn so gut sind meine Javaskript-Kenntnisse dann auch nicht, um so ein Ding zu lösen.

Folgende Funktion wird zusätzlich in die Seite eingefügt, die auch die AJAX-Links beinhaltet:

function pollC(id, load){
if (!load&&document.getElementById(id)){
document.getElementById(id).id='';
return;
}
else if (load&&document.getElementById(id)){
if (id=='loadedmarker')  //optional
initLightbox();  //required
return;
}
else if (load&&!document.getElementById(id))
setTimeout("pollC('"+id+"', 'load')", 60);
}

Entscheidend bzw. anzupassen ist Zeile 7. Man muss Lightbox dann neu initialisieren, wenn der HTML-Code der Kategorie-Archive dank AJAX in die Seite integriert wurde, so dass Lightbox, denn Code neu parsen kann und so die Stellen findet, wo es gebraucht wird.

Um zu wissen, wann alle Inhalte geladen sind braucht es eine Art Markierung. Dieser Marker – ein einfaches <span id=“loadedmarker“></span> – befindet sich ganz am Ende vom Template des Kategoriearchivs:

<MTEntries>
<hr/>

<$MTEntryBody safe_urls="1"$>
<h2 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h2>
<$MTEntryMore safe_urls="1"$>
</MTEntries>

<span id="loadedmarker"></span>

Wenn also alle richtigen Inhalte geladen sind, sieht dieses Poll-Skript den Marker und initialisiert Lightbox neu.

Nun funktioniert Lightbox zwar, aber nur auf den ersten Blick. Lade ich die gleiche Seite ein zweites Mal mit AJAX, dann erinnert sich das Poll-Skript daran und intialisiert Lightbox nicht mehr. Einfach ausgedrückt muss Lightbox jedes mal neu intialisiert werden, wenn sich der Inhalt ändert. Ob die Inhalte bereits vorher cached wurden oder nicht, spielt keine Rolle. Lightbox braucht aktuell für jede Änderungen des HTML-Code eine neue Intialisierung. Dieses Problem löst das Poll-Skript indem es zusätzlich alte, bereits einmal gelandene IDs löscht.

Die eigentliche AJAX-Links, die den Ablauf dann auslösen werden somit etwas länger:

<a href="javascript://" onmousedown="pollC('loadedmarker')"
onmouseup="getMyHTML('../portfolio/archiv/category/nonprint',
'ajax-container');pollC('loadedmarker', 'load')">Non-Print</a>

Bei onmousedown löscht er die Marker-ID bzw. setzt den Status auf unbekannt, um wirklich jedesmal neu zu intialisieren. Bei onmouseup werden die externen Inhalte in das Div mit der ID ajax-container geladen um darin den Marker – das span mit der loadedmarker – zu finden und den Status auf geladen zu setzen, woraufhin Lightbox neu initialisiert wird. Aufwendiger als gedacht, aber nun funzt’s. Jetzt ehlen nur noch die echten Inhalte^^

Jede Skript-Spielerei die eine nächträgliche Initialisierung bei AJAX-geladenen Inhalten benötigt, lässt sich mit diesem Skript richten. Lightbox hier ist nur ein klassisches Beispiel.

Feedback: 3 Kommentare