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 = '#';
}
}
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>
<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
Cytat
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:
Cytat
After your ajax request, put Slimbox.scanPage(); to scan the ajax request and link the <a>
lub
Cytat
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
}
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();
}
}
}
{
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.