Question

I built this function to scroll through a gallery. The gallery should scroll to the next image by itself every 6000ms, but if the user clicks on a thumbnail it should go directly to that thumbnail and then reset the timer for 6000ms.

My code is not working because I do not think I got the JQuery retriggereing function right. Not quite sure what I am doing.

var timerp = null;

$('.thumbs').click(function() {
         clearTimeout(timerp);
         $('.cornerimgfocus').removeClass('cornerimgfocus');
         $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
     }, function gallery() {
        clearTimeout(timerp);
        timerp = setTimeout(function() {
            var islide = $('.cornerimgfocus');
            $(islide).removeClass('cornerimgfocus');                    
            if(islide[0]==$('.cornerimg:last')[0]) {
            var nextslide =  $('.cornerimg').first();
            }
            else {
            var nextslide = $(islide).next();
            }
             gallery();
        }, 6000);
    });

Any ideas?

Marvellous

By the way, the mouseclick works perfectly it is only the timeout that I have not got correct.

I tried this. Still nothing. The click is still working but the timeout function is not.

$('.thumbs').click(function() {
         clearTimeout(timerp);
         $('.cornerimgfocus').removeClass('cornerimgfocus');
         $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
         timerp = setTimeout(function() {
         $('#' + $(this).attr('id')).next().click()
         }, 3000)

    });

I thought that if I added the .next().click() it would reactivate this click function but it doesn’t. How do we achieve this.

Answer 1

You’re passing two functions to the click() method, which is not supported. Also, it looks like you want setInterval() instead of setTimeout(), and you’re not adding the cornerimgfocus class to the next slide when the timer ticks. Try:

var timerp = null;

$('.thumbs').click(function() {
    if (timerp) {
        window.clearInterval(timerp);
    }
    $('.cornerimgfocus').removeClass('cornerimgfocus');
    $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
    gallery();
});

function gallery()
{
    timerp = window.setInterval(function() {
        var islide = $('.cornerimgfocus');
        islide.removeClass('cornerimgfocus');
        var nextSlide;
        if (islide[0] == $('.cornerimg:last')[0]) {
            nextslide = $('.cornerimg').first();
        } else {
            nextslide = islide.next();
        }
        nextSlide.addClass('cornerimgfocus');
    }, 6000);
}

gallery();  // Start the animation.