coldheat

Lightbox-Skript bei AJAX-Inhalten

• Di, 07. November 2006,
• 563 Wörter,
• 3 Kommentare,
• Tags:
• AJAX,
• CSS,
• Tutorial

Ich bin immer noch am Rum­wer­keln mei­nes Online-Portfolios, nun aller­dings nähert sich das Ganze zumin­des­tens funk­tio­nal der Fer­tig­stel­lung oder ein­fach for­mu­liert: es funzt alles. Was hat diese Geschichte nun so kom­pli­ziert gemacht?

Das Port­fo­lio ist ein sepa­ra­ter Blog in der glei­chen Movable-Type Instal­la­tion wie auch der Haupt­blog hier oder der Link­blog. Mein Wunsch war es, so mög­lichst ein­fach das Port­fo­lio ver­wal­ten zu kön­nen, ohne groß manu­ell neue Links set­zen zu müs­sen, so wie bei der jet­zi­gen Gale­rie.

Schreibe ich nun einen neuen Ein­trag in den Portfolio-Blog, dann wer­den auch die Archive die­ses sepa­ra­ten Blogs aktua­li­siert. Diese Archive hole ich mir dann mit Hilfe von AJAX in den Haupt­blog hier. Dank Movable-Type kann ich das Port­fo­lio sogar sehr ein­fach nach Kate­go­rien ver­wal­ten und mit genau die­sen Kategorie-Archiven arbei­tet die Haupt­seite.

Klickt der Besu­cher dann zum Bei­spiel den Link Non-Print, dann holt sich die Seite das Kategorie-Archiv Non-Print vom Portfolio-Blog und lädt es in die aktu­elle Seite des Brow­sers. Soweit nicht allzu kom­pli­ziert. Pro­bleme kamen, als ich das Light­box-Skript zum Ver­grö­ßern der Portfolio-Bilder nut­zen woll­ten.

Light­box initia­li­siert sich beim Laden der Seite im Brow­ser und kann dann genau mit den Inhal­ten arbei­ten, die zu die­ser Zeit vor­han­den sind. Wenn ich nun mit AJAX die Kategorie-Archive in die Seite lade, dann ändern sich die Inhalte, aber Light­box bekommt davon nichts mit und kann somit nicht damit arbei­ten. Ein paar Google-Suchen spä­ter, brach­ten zwei Links Licht ins Dun­kel, denn so gut sind meine Javaskript-Kenntnisse dann auch nicht, um so ein Ding zu lösen.

Fol­gende Funk­tion wird zusätz­lich in die Seite ein­ge­fügt, die auch die AJAX-Links beinhal­tet:

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);
}

Ent­schei­dend bzw. anzu­pas­sen ist Zeile 7. Man muss Light­box dann neu initia­li­sie­ren, wenn der HTML-Code der Kategorie-Archive dank AJAX in die Seite inte­griert wurde, so dass Light­box, denn Code neu par­sen kann und so die Stel­len fin­det, wo es gebraucht wird.

Um zu wis­sen, wann alle Inhalte gela­den sind braucht es eine Art Mar­kie­rung. Die­ser Mar­ker - ein ein­fa­ches <span id=“loadedmarker”></span> - befin­det sich ganz am Ende vom Tem­plate des Kate­go­rie­ar­chivs:

<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 rich­ti­gen Inhalte gela­den sind, sieht die­ses Poll-Skript den Mar­ker und initia­li­siert Light­box neu.

Nun funk­tio­niert Light­box zwar, aber nur auf den ers­ten Blick. Lade ich die glei­che Seite ein zwei­tes Mal mit AJAX, dann erin­nert sich das Poll-Skript daran und intia­li­siert Light­box nicht mehr. Ein­fach aus­ge­drückt muss Light­box jedes mal neu intia­li­siert wer­den, wenn sich der Inhalt ändert. Ob die Inhalte bereits vor­her cached wur­den oder nicht, spielt keine Rolle. Light­box braucht aktu­ell für jede Ände­run­gen des HTML-Code eine neue Intia­li­sie­rung. Die­ses Pro­blem löst das Poll-Skript indem es zusätz­lich alte, bereits ein­mal gelan­dene IDs löscht.

Die eigent­li­che AJAX-Links, die den Ablauf dann aus­lö­sen wer­den somit etwas län­ger:

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

Bei onmou­se­down löscht er die Marker-ID bzw. setzt den Sta­tus auf unbe­kannt, um wirk­lich jedes­mal neu zu intia­li­sie­ren. Bei onmou­seup wer­den die exter­nen Inhalte in das Div mit der ID ajax-container gela­den um darin den Mar­ker - das span mit der loa­ded­mar­ker - zu fin­den und den Sta­tus auf gela­den zu set­zen, wor­auf­hin Light­box neu initia­li­siert wird. Auf­wen­di­ger als gedacht, aber nun funzt’s. Jetzt ehlen nur noch die ech­ten Inhalte^^

Jede Skript-Spielerei die eine näch­träg­li­che Initia­li­sie­rung bei AJAX-geladenen Inhal­ten benö­tigt, lässt sich mit die­sem Skript rich­ten. Light­box hier ist nur ein klas­si­sches Bei­spiel.

Zum gleichen Thema

• Balken-Diagramme im Web-DesignCSS

• 1024 PixelFundstücke

• CSS-Microformats - Trennung von Form, Form, Form und InhaltCSS

• Micro RelaunchCSS

• Tutorial - Wicked WornPhotoshop

• Zwischenstand zur neuen VersionFundstücke

• jQuery - Flash of Unstyled ContentCSS