Wygląda to mniej więcej tak:
(function($){ $.fn.thumbPresentation = function(options){ $(this).each(function(){ currPhoto = 0; photosCount = zindex = $('img', this).length; zindex = 0; for(z=photosCount;z>=0;z--){ $('img:eq('+z+')', this).css('z-index', zindex); zindex++; } setInterval( function(){ $('img:eq('+currPhoto+')', this).fadeOut(); }); if(currPhoto == photosCount -1){ $('img', this).fadeIn(); currPhoto = 0; } else{ currPhoto++; } }, Math.floor((Math.random() * 10) + 1) * 1000); }); return $(this); }; })(jQuery)
No i html
<div class="photo-container"> <img src="images/albums/sample/1.jpg" /> <img src="images/albums/sample/3.jpg" /> <img src="images/albums/sample/2.jpg" /> </div> <div class="photo-container"> <img src="images/albums/sample/2.jpg" /> <img src="images/albums/sample/3.jpg" /> <img src="images/albums/sample/1.jpg" /> </div> <div class="photo-container last"> <img src="images/albums/sample/3.jpg" /> <img src="images/albums/sample/1.jpg" /> <img src="images/albums/sample/2.jpg" /> </div> <script> $(document).ready( function(){ $('.photo-container').thumbPresentation(); }); </script>
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"?