Lightbox beépítése AJAX-os oldalba

A Lightbox és a Lightbox 2 nagyon hasznos segédeszközök lehetnek weblapjainkon, azonban van egy hibájuk: kliens oldalon előállított oldalakhoz kicsit trükközni kell, hogy rendesen működjön. Ehhez szeretnék kis segítséget adni ebben a rövid leírásban.

Ahhoz, hogy az alapvető problémát megértsük egy kicsit a JavaScript alapjaihoz vissza kell térni: a JavaScript eseményvezéreltsége. Gondoljunk csak a HTML fájlokban levő onclick, onsubmit, onload és hasonló tulajdonságokra. Mind egy-egy függvényt állít be, ami lefut, ha az adott esemény (a user kattintgat, elküldi a formot vagy akár a usertől független oldal-betöltődés) bekövetkezik.

A felhasználó persze többször is kattinthat egy-egy elemre, akár többször is elküldhet egy formot (pl.: rosszul töltötte ki, így a JS megálljt parancsolt neki), viszont egy oldal csak egyszer töltődik be. Ezt az eseményt a böngésző hívja meg, amikor az oldal megjelenítése és a hozzá tartozó elemek (pl.: képek) letöltése kész.

A Lightbox pont erre az eseményre épít, így a linkek működését csak egyszer írja felül, ekkor hozza létre a megjelenítéshez szükséges HTML elemeket (div-ek, img-k, szövegek). Innen már egyszerű kitalálni, hogy az utólag felvitt elemekre nem lesz hatással. Szerencsére a kód nagyon jól meg van írva, egy újabb függvény-hívással bármikor képes a képeinkre lazadobozt varázsolni.

initLightbox();

A probléma az, mint azt korábban írtam, hogy ez a függvény tölti fel a DOM-ba a szükséges elemeket. A 20-ik hívásnál így már 19-szer feleslegesen lennének az elemek betöltve, így ezt elkerülendő egy kicsit módosítanunk kell az eredeti kódon.
Szerencsére a 2-es és 1-es verziók felépítése hasonló, így pillanatok alatt bármelyikre bevihető a – ráadásul megegyező – javítás, csak a sorok száma nem stimmel. Ez a 2.02 verzióban a 219., az 1-es verzióban pedig a 312. sor. (A sor számok persze változhatnak az új verziókkal, azonban könnyen megkereshetjük ezt a helyet: van valahol kommentelve egy rövidebb HTML részlet (ezzel tölti fel az oldalt), az ezután levő sorokba kell írni a következőkek. Ez az 1-es verziónál az initLightbox függvényben, a 2-esnél a Lightbox osztály konstruktorában (initalize) található.)

if(document.getElementById('overlay') != null) {
   return;
   }

Ez csak annyit csinál, hogy amennyiben már létezik overlay azonosítójú elem a DOM-ban visszatér a függvényből, így az utána levő kódok nem kerülnek értelmezésre. Vagyis nem helyez felesleges elemeket az oldalba.

Ezzel az első problémát áthidaltuk, már csak az initLightbox() függvényt kell minden oldal-módosításkor meghívni. Ebben – az ahány oldal annyi megoldás elv miatt – nem tudok segíteni, a lényeg, hogy mindig az oldal módosítása után kell azt megtenni.

Azonban hogy valami használhatót is írjak a Harder által leírt AJAX-os megoldáshoz egy kis segítség. Amilyen jól működik az a kód, annyira szörnyen néz ki az htmlhttprequest.js fájlja. Nem igazán látszik a kódban, de az abban leírt RemoteFileLoader osztálynak van egy onload eseménye. Ez – az xmlhttprequest objektumok onreadystatechange függvényével ellentétben – nem az adat letöltése után kerül meghívásra, hanem annak az oldalba illesztésekor – ugyanis szintén a RemoteFileLoader végzi ezt is. Éppen ezért nem kell ezt az átláthatatlan kódrengeteget módosítanunk, elég az inside.js fájlban módosítanunk egy keveset:

var docClickLoader = new RemoteFileLoader('docClickLoader');

Ezzel készítünk egy példányt a RemoteFileLoader-ből. Egész egyszerűen a docClickLoader onload tulajdonságát írjuk felül:

docClickLoader.onload = function() { initLightbox() };

Ezt beszúrva a második sorba a LightBox-unk minden így használt oldalunkon működni fog.