Question

i can’t manage to make this work : in my gallery, if i click on a “bullet” (when setInterval is already running) there is a bug, example :

when i let the gallery running : edit: the click on bullets did not work properly :

var current = 0;
/* click on BULLETS : i think the problem is in this function */
pts.live('click', function () {
        var index = $(this).index();

        clearInterval(timer);
        current = index-1;
        timer = setInterval(function() { showImage(current) },2000); 

        return false;
    });

---

EDIT : thanks Gavriel, it seems better with addClass indeed! but i can’t manage to fix the click on the bullets : when i click on a bullet, i would like to “stop” the interval and go directly to the image i clicked on. Is it possible? when i try it (please see below), the “current” image stays as is, it stays for 1-2 seconds, then starts again the interval as if nothing happened… would you have any idea?

/* click on BULLETS :  */
pts.live('click', function () {
        var index = $(this).index();

        clearInterval(timer);

        li.removeClass('next');
        li.eq(index).addClass('next');
        showImage();

        timer = setInterval(function() { nextImage() }, 1000);

        return false;

    });

//TIMER
var timer = setInterval(function() { nextImage() }, 1000);
li.eq(0).addClass('next');

function nextImage(){
    var index = $('#contG').find('li:.next').index();
    $('#contG').find('li:.next').removeClass('next').addClass('current');

    /*design bullet */
    var pts_li = $("#points").find('ul').find('li');
        pts_li.removeClass('activ');

    /* limit */
    var total = li.length; //3

    if (index+1>total-1) {
        index = 0;
    } else {
        index = index+1;
    }

    li.eq(index).removeClass('current').addClass('next');
    pts_li.eq(index).addClass('activ');

    showImage();
}


/* SHOWIMAGE */
function showImage(){
    //clearInterval(timer);
    $('#contG').find('li:.next').fadeIn("slow");//FADEIN
    $('#contG').find('li:.current').fadeOut("slow");//FADEOUT
}

---

EDIT N°2 : FINAL COMBAT

ok i finally found out how to solve this… 🙂 Thanks Firebug :

here’s the code :

pts.live('click', function () {
        var index = $(this).index();

        clearInterval(timer);

        $('#contG').find('li:.next').removeClass('next').addClass('current');

        li.eq(index).removeClass('current').addClass('next');

        showImage();
        timer = setInterval(function() { nextImage() }, 2500);

        return false;
    });

Thanks a lot

Answer 1

Your problem is the usage of the global current variable. Start using closures:

(function(c){
    timer = setInterval(function() { showImage(c) },2000);
})(current);

this way at the moment of the click you’ll pass current to the function, and 2 seconds later you’ll pass THAT value to showImage and not current’v value whatever it may be 2 seconds later.

However trying to understand what you want to do… I think the better way would be something like this:

Instead of doing fade to an element that you “calculate” by the value of current, I would try to use classes to “sign” the “current” element: $(this).addClass(“current”) or something like that, and in the fade I would use $(‘#contG’).find(‘li:.current’).fadeOut(“slow”, function(){$(this).removeClass(“current”)});