Question

I am making a gallery and, for the user to navigate it, I want him to be able to use both thumbnails and next/prev buttons.
They are both working, but not together.

When I open the gallery it shows image number 1. But, if I use the thumbnails to select image number 4 and then press “next”, it shows me image number 2. As the prev/next buttons are considering the images from the main gallery, which is my #polaroid div.

Here’s the fiddle: http://jsfiddle.net/claudiamarques/KasTN/1/

And here’s the js where I suspect the problem might be in:

$("#thumbnails li img").click(function() {

    var thumbnail_caption = $(this).attr('alt');
    var thumbnail_src = $(this).attr('src');

    $("#polaroid img:visible").fadeOut(function() {
        $(this).attr('src', thumbnail_src).fadeIn();
        $("p.caption").text(thumbnail_caption);
    });
});​

I am changing the “src” from #polaroid img:visible but somehow not making it permanently.

Can someone please help me?

Answer 1

If I were you I’d just use flexslider, all the work is done for you and it has lots of options to play around with:
http://www.woothemes.com/flexslider/