[AJAX/PHP][Slimbox] Przy zmianie treści DIV'a przez Request nie działa Slimbox Opcje

[de_mon]

Witam

Tworzę stronę dla zespołu muzycznego. Mimo, iż nie jestem zwolennikiem używania tła dźwiękowego na stronach, uległem prośbie prowadzącego zespół i zamieściłem player odtwarzający jeden utwór w tle strony.
Aby odtwarzany utwór nie zaczynał się zawsze od początku przy przełączaniu działów, postanowiłem skorzystać z funkcji XMLHttpRequest w oparciu o jeden z tutoriali dostępnych w sieci. Stronę przygotowałem tak, że jeśli obsługa JavaScript w przeglądarce nie jest wyłączona, to wybrany w menu fragment strony zostaje przeładowany bez odświeżania całości przez XMLHttpRequest. Jeśli obsługa JavaScript jest wyłączona (oraz, aby zachować kompatybilność z wyszukiwarkami) fragment strony jest podmieniany przez funkcję include (PHP), oczywiście strona odświeża się i odtwarzacz zaczyna grać od nowa.
Kłopoty zaczęły się w momencie gdy zacząłem tworzyć galerię. Chcę w niej skorzystać z efektu otwierania obrazka jaki oferuje SlimBox. Kiedy strona działa bez skryptu przeładowującego XMLHttpRequest (tzn. przeładowywanie fragmentów obsługuje PHP), wtedy zdjęcia otwierają się poprawnie z wykorzystaniem efektu Slimbox. W sytuacji, kiedy przeładowywanie fragmentów obsługuje AJAX, wtedy zdjęcia otwierają się standardowo w oknie (bez żadnych efektów).
Wyjątkiem jest bezpośrednie wejście do galerii (link wpisany w pasku adresu), wtedy efekt rozwijania zdjęć działa. Jednak po przejściu do innego działu i powrocie do galerii Slimbox przestaje działać.

Tak wygląda skrypt do przeładowywania zawartości DIV'a wskazanego w linku. Kiedy go zablokuję, to efekt Slimbox działa poprawnie.

CODE

function getXMLHttpRequest() {
var request = false;
try {
request = new XMLHttpRequest();
} catch(err1) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
} catch(err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
} catch(err3) {
request = false;
}
}
}
return request;
}

var r;
r = getXMLHttpRequest();

var e;
function odbierzDane()
{
if (r.readyState == 4) {
if (r.status == 200 || r.status == 304) {
e.innerHTML = r.responseText;
}
}
}

function wymienTresc(adresurl, htmlid, hiperlacze)
{
if (r = getXMLHttpRequest()) {
e = document.getElementById(htmlid);
r.open('GET', adresurl);
r.onreadystatechange = odbierzDane;
r.send(null);
hiperlacze.href = '#';
}
}

Tak wygląda link w menu, który wywołuje powyższy skrypt i wskazuje jaki plik ma być załadowany do DIV'a o id=content

CODE

<li>
<a href="index.php?subject=start" onclick="wymienTresc('content/start.php', 'content', this);">Start</a>
</li>

Jeśli JavaScript nie jest dostępny, to przeładowanie zawartości wywoływane jest przez parametr zmiennej subject i obsługiwane przez PHP.

W związku z powyższym moje pytanie, gdzie leży problem, że gdy strona obsługiwana jest przez AJAX, to efekt Slimbox nie działa i jak to można poprawić? Przypuszczam że trzeba w jakiś sposób wymusić przeładowanie skryptu Slibmox po wejściu do galerii, tak, aby wyszukał linki do obrazków i przygotował je do wyświetlenia z efektem.
Widziałem w innych postach na forum poradę dla podobnych problemów, aby w body dopisać onload="initLightbox();" Niestety to nie działa, gdyż u mnie przeładowywany jest tylko DIV a nie całe body. Spotkałem też poradę, aby

uruchomic lightboxa manualnie podajrze $("nazwa_diva a").lightbox(); zaraz po innerHTML = Response.text .

Niestety to też nie działa.
Obydwóch sposobów próbowałem zastępując Lightbox -> Slimbox.

Czy istnieje jakiś sprawdzony sposób, aby wymusić działanie Slimbox po przeładowaniu wyłącznie DIV'a?

Witam ponownie
Problem rozwiązany
Po kilku dniach przeszukiwania forów i grup dyskusyjnych, trafiłem na archiwalny wątek dotyczący podobnego problemu na jednej z grup na google.

Opis rozwiązania brzmiał następująco:

After your ajax request, put Slimbox.scanPage(); to scan the ajax request and link the <a>

lub

on your event onSuccess:
onSuccess: function(text, xmlresponse){
$(content).set('html',text);
Slimbox.scanPage(); // to scan the ajax request and link the <a> for slimbox
}

U mnie sprowadziło się to do dodania Slimbox.scanPage(); po e.innerHTML = r.responseText;

Obecnie funkcja odbierzDane wygląda następująco:

Kod

function odbierzDane()
   {
      if (r.readyState == 4) {
         if (r.status == 200 || r.status == 304) {
            e.innerHTML = r.responseText;
            Slimbox.scanPage();
         }
      }
   }

Teraz efekt Slimbox działa za każdym razem, nie tylko po bezpośrednim wejściu do galerii, ale też po przejściu do innego działu i następnie powrocie do galerii.

Ten post edytował de_mon 2.11.2008, 17:57:06