Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Plugin jQuery działający dla wielu elementów o tej samej klasie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Ultear
Witam, napisałem "plugin", dzięki któremy chcę zrobić prezentacje poszczególnych zdjęć z galerii w jej "okładkowym obrazie".

Wygląda to mniej więcej tak:

  1. (function($){
  2. $.fn.thumbPresentation = function(options){
  3.  
  4. $(this).each(function(){
  5.  
  6.  
  7. currPhoto = 0;
  8. photosCount = zindex = $('img', this).length;
  9. zindex = 0;
  10.  
  11. for(z=photosCount;z>=0;z--){
  12.  
  13. $('img:eq('+z+')', this).css('z-index', zindex);
  14. zindex++;
  15.  
  16. }
  17.  
  18. setInterval( function(){
  19. $('img:eq('+currPhoto+')', this).fadeOut();
  20. });
  21.  
  22. if(currPhoto == photosCount -1){
  23. $('img', this).fadeIn();
  24.  
  25. currPhoto = 0;
  26. }
  27. else{
  28. currPhoto++;
  29. }
  30.  
  31.  
  32.  
  33. }, Math.floor((Math.random() * 10) + 1) * 1000);
  34.  
  35.  
  36. });
  37. return $(this);
  38. };
  39. })(jQuery)


No i html

  1. <div class="photo-container">
  2. <img src="images/albums/sample/1.jpg" />
  3. <img src="images/albums/sample/3.jpg" />
  4. <img src="images/albums/sample/2.jpg" />
  5.  
  6. </div>
  7. <div class="photo-container">
  8. <img src="images/albums/sample/2.jpg" />
  9. <img src="images/albums/sample/3.jpg" />
  10. <img src="images/albums/sample/1.jpg" />
  11. </div>
  12.  
  13. <div class="photo-container last">
  14. <img src="images/albums/sample/3.jpg" />
  15. <img src="images/albums/sample/1.jpg" />
  16. <img src="images/albums/sample/2.jpg" />
  17. </div>
  18. $(document).ready( function(){
  19.  
  20. $('.photo-container').thumbPresentation();
  21. });




Jednak nie widać w ogóle efektu, żaden z "photo-containerów" nie przemienia zdjęć, pewnie jest to spowodowane tym, że plugin nadpisuje swoje zmienne. Sam skrypt dla jednego elementu działa. Czy ktoś mógłby mi pomóc poprawić ten plugin, tak aby działał dla każdego elementu o klasie "photo-container"?

trueblue
Deklaruj zmienne jako lokalne.
Ultear
w sensie ze z var?
kamil4u
Tak, poczytaj o zmiennych globalnych i lokalnych w JS: http://www.cezarywalenciuk.pl/post/2013/01...-ich-unika.aspx
Ultear
wciąż nie za bardzo chce to działać :c

  1. (function($){
  2. $.fn.thumbPresentation = function(options){
  3.  
  4. $(this).each(function(){
  5.  
  6.  
  7. var currPhoto = 0;
  8. var photosCount = $('img', this).length;
  9. var zindex = 0;
  10.  
  11.  
  12.  
  13. for(z=photosCount;z>=0;z--){
  14.  
  15. $('img:eq('+z+')', this).css('z-index', zindex);
  16. zindex++;
  17.  
  18. }
  19.  
  20. setInterval( function(){
  21. $('img:eq('+currPhoto+')', this).fadeOut();
  22.  
  23.  
  24. if(currPhoto == photosCount -1){
  25. $('img', this).fadeIn();
  26.  
  27. currPhoto = 0;
  28. }
  29. else{
  30. currPhoto++;
  31. }
  32.  
  33.  
  34.  
  35. }, Math.floor((Math.random() * 10) + 1) * 1000);
  36.  
  37.  
  38. });
  39. return $(this);
  40. };
  41. })(jQuery)
trueblue
  1. }, Math.floor((Math.random() * 10) + 1) * 1000);

Co to jest? Czego dotyczy?
Ultear
Interwał, randomowy czas powtarzania
trueblue
Pogubiłem się w nawiasach.

Wyprowadź na zewnątrz this z funkcji setTimeout, zadeklaruje zmienną lokalną np. _this przypisz do niej this i operuj w setTimeout na _this.
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.