Jquery each, how to make reloop after finish

Question

I have this code to run a slideshow (this is only part of what really going in my code)

var slideshow = {
        delay: 5000,
        actions:[],
        run: function() {
                if (slideshow.actions.length) {
                        slideshow.actions.shift()();
                        setTimeout(slideshow.run, slideshow.delay);
                }
        }
};
 var tn;
$(".sideimg").each(function(){
        var that = this;

        slideshow.actions.push(function(){
 if (tn != "") {
  out(tn);
 }
 over($(that).attr("id"));
 var $paneTarget = $('#lyr1');

 var $target = $paneTarget.find('#'+$(that).attr("id"));
 $paneTarget.stop().scrollTo( $target , 800 );

 $("#rimg").fadeOut("slow",function () {
 $("#rimg").attr("src",$(that).attr("bsrc")); 
 $("#rimg").attr("alt",$(that).attr("alt")); 
   $("#rimg").fadeIn("normal");
  });
 tn = $(that).attr("id");

        });

});

after finishing running each sideimg class it stops... i need to re start from the beggining... i have tried to recall it - but nothing happend

thanks guys

Answer 1

For this situation, I wouldn't use the each method at all. I'd use setTimeout, an array of object that have your image/href information, and a value that tells you where in the array of images you are. When you get to the end of the array, reset the value (the following code is simplified for clarity, and not tested):

var index = 0;
var images = // array of image containing objects here. 

function RunSlideShow()
{
     // modify the following line to perform any effects, etc, and other attribute settings you need. 
     $("#rimg").attr("src", images[index].image);

     index = index + 1;
     if (index = images.length)
         index = 0;
     window.setTimeout('RunSlideShow();', 5000);
}

RunSlideShow();

Each time the function in your slideshow object is called, you really need to have that function load the next slide before it exits. The issue with having each reloop when it's done, is the question: "When does it stop?" If you pre-load all the images, to continue forever, you'll cause an infinite loop and more than likely crash the browser. You need the same function to set the image, then prepare the next image to be shown, but it should look no further in the future than the next image. Anytime you try to go beyond that, you're at risk of creating an ever-growing collection of items that will never stop.

Answer 2

in you Run method you shift the array elements.. this removes them from the array.. you should shift it and then push it back in at the end ...

var slideshow = {
        delay: 5000,
        actions: [],
        timer: null,
        pause: function(){ clearTimeout( slideshow.timer ); },
        resume: function(){ slideshow.timer = setTimeout(slideshow.run, slideshow.delay); },
        run: function() {
                    if (slideshow.actions.length) {
                            var current = slideshow.actions.shift();
                            current();
                            slideshow.actions.push( current );
                            slideshow.timer = setTimeout(slideshow.run, slideshow.delay);
                    }
            }
};

I just added the timer variable which will hold the timeout object so you can clear it on demand, and also a couple of methods to start/stop the slideshow..

now just add hover events to the elements that you want to start/stop the slideshow with slideshow.pause() or slideshow.resume()