Question

I have created a slideshow for images contained in a div with class called “mainSlide”, this works perfectly but when i attempt to create another div with the same class name “mainSlide”, i dont see any slideshow effect on the second div just the first one.

<div class="mainSlide">
<img src="img/1.jpg" style="display:none;" />
<img src="img/2.jpg" style="display:none;" />
<img src="img/3.jpg" style="display:none;" />
</div>
<br /><br /><br/><br />

<div class="mainSlide">
<img src="img/1.jpg" style="display:none;" />
<img src="img/2.jpg" style="display:none;" />
<img src="img/3.jpg" style="display:none;" />
</div>


<script type="text/javascript">
$(document).ready(function() {

slideShow();

function slideShow() {
    $allSlides = $('div.mainSlide img').length;
    $hiddenSlides = $('div.mainSlide img:hidden').length;

    if ($hiddenSlides == $allSlides) {
        $('div.mainSlide img:first').fadeToggle('slow', function() { slideShow(); });
    } else {
        $('div.mainSlide').find('img:visible').delay(5000).fadeToggle('slow', 
            function() {
                if ($(this).attr('src')==$('div.mainSlide img:last').attr('src')) {
                    $('div.mainSlide img:first').fadeToggle('slow', function() { slideShow(); });
                } else {
                    $(this).next('img').fadeToggle('slow', function() {slideShow();});
                }
            });
    }
}

});
</script>

Answer 1

Your code is written under the assumption that there will only be one slide show.

To handle multiple slide shows you have to loop through the mainSlide elements, and do everything in the slideShow function on each one. Also, you have to use each mainSlide element as scope when you handle the images, so that the code only applies to the images in that element.

$('div.mainSlide').each(function(i, slide){
  slideShow(slide);
});

function slideShow(slide) {

  $allSlides = $('img', slide).length;

  // and so on...

}