Slideshow with next/back arrows, caption... but unable to add a counter

Question

I'm making a slideshow using JQuery Cycle with arrows (done), caption (done), but I can't make the counter. I'm basing my slideshow on this example: http://www.morganstudio.co.uk/ (in this one the counter works but there is no slideshow, which I have)

HTML:

<div id=“slideshow”>
    <img  class="slide" src="images/one.jpg"    alt=“one”   name="http://pageone.com"/>
    <img  class="slide" src="images/two.jpg"    alt=“two”   name="http://pagetwo.com"/>
    <img  class="slide" src="images/three.jpg"  alt=“three”   name="http://pagethree.com"/>
</div>
<div id=“navigator”>
    <a id="prev" href=""><div id="navPhotos"></div></a>
    <a id="next" href=""><div id="navPhotos2"></div></a>
</div>
<div id="description"></div>
<div id=“counter”></div>

JAVASCRIPT:

$(document).ready(function() {
        $(‘#slideshow’).cycle({
        fx:'fade',
        speed: 300,
        timeout:4000,
        next: '#next',
        prev: '#prev',
        before: onBefore,
});
function onBefore() {
    $('#description p').fadeIn('1000');
        $('#description').html('<p>' + '<a href="' + this.name + '">' + this.alt + '</a>' + '</p>');
    }
});

Answer 1

Try to change your JavaScript to the following, where i added another callback.

(disclaimer, not tested).

$(document).ready(function() {
    $(‘#slideshow’).cycle({
    fx:'fade',
    speed: 300,
    timeout:4000,
    next: '#next',
    prev: '#prev',
    before: onBefore,
    after: onAfter
});
function onBefore() {
    $('#description p').fadeIn('1000');
        $('#description').html('<p>' + '<a href="' + this.name + '">' + this.alt + '</a>' + '</p>');
    }
};

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}