Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][js]Lightbox nie działa z ajaxem
Forum PHP.pl > Forum > Przedszkole
ganol
Mam taki problem.
Załączam w nagłówku lightboxa:
  1. <script type="text/javascript" src="slimbox/mootools.js"></script>
  2. <script type="text/javascript" src="slimbox/slimbox.js"></script>
  3. <link rel="stylesheet" href="slimbox/slimbox.css" type="text/css" media="screen" />

I wszystkie zdjęcia pięknie działają (po kliknięciu rozwija się podgląd zdjęcia):
  1. <a rel='lightbox-grupa' src=zdjecie.jpg>pokaż zdjęcie</a>

problem pojawia się gdy wczytuję nowe linie ajaxem.
Nowe linie mają identyczną strukturę (również rel=lightbox-grupa), jednak te już nie działają sad.gif
jak to poprawić?
Turson
Pokaż kodzik ze zdjeciami. Żeby lightbox działał wszystkie zdjęcia muszą być w jednym divie
ganol
Nie są w jednym divie.
Ale pierwsze zdjęcia (te które wczytują się z wejściem na stronę) też nie są w jednym divie i działają.
Więc twoje twierdzenie że muszą być w 1 divie jest błędne.

Kod mi trudno wkleić bo strona ma ogromne źródło a ważnych linijek tylko kilka.
Postaram się to 'przyciąć'.
lukasz_os
https://api.jquery.com/on/
Turson
Ostatnio robiłem podobnie i gdy zdjęcia ładowały się ajaxem to musiały być w jednym divie. Sprawdź
ganol
Sprawdzam.
Żadne operowanie na divach nic nie zmienia.

Pełny kod:
  1. <script type="text/javascript" src="slimbox/mootools.js"></script>
  2. <script type="text/javascript" src="slimbox/slimbox.js"></script>
  3. <link rel="stylesheet" href="slimbox/slimbox.css" type="text/css" media="screen" />
  4.  
  5.  
  6. function ajax(url,destination){
  7. document.getElementById(destination).innerHTML='wczytuje...';
  8. var xmlhttp;
  9. if (window.XMLHttpRequest){
  10. xmlhttp=new XMLHttpRequest();
  11. }else{
  12. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  13. }
  14. xmlhttp.onreadystatechange=function(){
  15. if (xmlhttp.readyState==4 && xmlhttp.status==200){
  16. document.getElementById(destination).innerHTML=xmlhttp.responseText;
  17. }
  18. }
  19. xmlhttp.open("GET",url,true);
  20. xmlhttp.send();
  21. }
  22.  
  23.  
  24. <?php include('wczytaj.php'); ?>
  25.  
  26. <div onclick='ajax("wczytaj.php","x")' >wiecej</div>
  27. <div id=x></div>

wiecej.php:
  1. <a rel='lightbox-grupa' href=zdjecie.jpg>pokaz zdjecie</a><br>
  2. <a rel='lightbox-grupa' href=zdjecie.jpg>pokaz zdjecie</a><br>
  3. <a rel='lightbox-grupa' href=zdjecie.jpg>pokaz zdjecie</a><br>
  4. <a rel='lightbox-grupa' href=zdjecie.jpg>pokaz zdjecie</a><br>
  5. <a rel='lightbox-grupa' href=zdjecie.jpg>pokaz zdjecie</a><br>
ganol
@lukasz_os

1. jakie zdarzenie miałbym tam podpiąć?
2. nie mam jquery. Mam instalować dla 1 funkcji?
trueblue
  1. if (xmlhttp.readyState==4 && xmlhttp.status==200){
  2. document.getElementById(destination).innerHTML=xmlhttp.responseText;
  3. $$('a[rel="lightbox-grupa"]').removeEvents("click"); //odpinasz zdarzenia wszystkim linkom z takim rel
  4. $$('a[rel="lightbox-grupa"]').slimbox(); //podpinasz wszystkim na nowo slimbox
  5. //lub w jednym
  6. //$$('a[rel="lightbox-grupa"]').removeEvents("click").slimbox();
  7. }


W MooTools (to nie jest jQuery) masz gotową klasę do obsługi Ajax, poczytaj dokumentację.
ganol
Cytat(trueblue @ 21.03.2014, 09:07:39 ) *
  1. $$('a[rel="lightbox-grupa"]').removeEvents("click").slimbox();



Dzięki!!
O to mi chodziło. Jedna linijka w odpowiednim miejscu i wszystko "jak-ta-lala".
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.