Question

I am using the jQuery Cycle plugin.

I have a “current # / total #” counter type thing below the slideshow. I update the “current #” after each transition.
I am using the “after” callback event successfully, but the “before” event doesn’t seem to work for the first transition. I would like the current # to change before the slideshow image transitions to the next one rather than after the transition.
Has anyone had this problem before?

I have the following code:

slideshow.cycle({ 
    timeout: 6000,
    next: '#nextImage', 
    prev: '#prevImage',
    after: setCurrent
});

function setCurrent(curr,next,opts) {
    $('#imageNumber').html(opts.currSlide + 1);
}

[EDIT]

I was able to fix this by using the following code:

slideshow.cycle({ 
    timeout: 6000,
    next: '#nextImage', 
    prev: '#prevImage',
    before: setCurrent
});

function setCurrent() {
    var image = $(this);
    $('#imageNumber').html(image.index() + 1);
}

Answer 1

The ‘before’/’after’ callback methods take no argument. In the context of the methods (i.e. setCurrent for you), you can use ‘this’ as the item going to be rendered.

Ref.: http://jquery.malsup.com/cycle/int2.html

So you need to do something kind of like:

function setCurrent() {
  $('#imageNumber').html(this.id + 1);
}

Note: I don’t know the rest of your code so you might need to adapt…