Question

I have a slideshow named rotatePics()that begins on pageload. I also have a number of li‘s that when clicked, will get the rel value of that li. The rel‘s of the li‘s match up with the id‘s of the preloaded slideshow images. So when one is clicked, I want to stop the current slideshow function named rotatePics and restart it but parsing a new integer.

Currently what is happening, is that I am able to run the NEW slideshow function, but not replace the slideshow function that runs when the page loads.

I need to stop rotatePics() and restart it with the variable number with only the latter function running.

$('a.main-img').click(function (e)
{
    e.preventDefault();

    var clickedLi = $(this).closest('li').attr('rel');

    var number = parseInt(clickedLi);

    rotatePics(number);

});

This is the code for the rotatePics() function

    function rotatePics(currentPhoto){

    var numberOfPhotos = $('#banner-holder img').length;

    currentPhoto = currentPhoto % numberOfPhotos;

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){
        $('#banner-holder img').each(function (i)
        {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
        });

        $(this).show();

        setTimeout(function ()
        {
            rotatePics(++currentPhoto); 
        }, 1000);
    });
};

I am also aware that the modulus section changes the integer, This was originally just a rolling slideshow and without the option to select new images.

Answer 1

Clear your timeout as follows:

var rotatePicsTimer;
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){ 
        $('#banner-holder img').each(function (i) 
        { 
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
        }); 

        $(this).show(); 

        rotatePicsTimer = setTimeout(function () 
        { 
            rotatePics(++currentPhoto);  
        }, 1000); 
    }); 
};

$('a.main-img').click(function (e)   
{   
    e.preventDefault();   

    var clickedLi = $(this).closest('li').attr('rel');   

    var number = parseInt(clickedLi);   

    clearTimeout(rotatePicsTimer);
    rotatePics(number);
});