jquery - 使缩略图与图库中的主图像匹配

Question

我正在制作一个画廊，为了让用户浏览它，我希望他能够同时使用缩略图和下一个/上一个按钮。他们都在工作，但没有一起工作。

当我打开画廊时，它显示图像编号 1。但是，如果我使用缩略图选择图像编号 4，然后按“下一个”，它会显示图像编号 2。因为上一个/下一个按钮正在考虑来自主图像画廊，这是我的#polaroid div。

这是小提琴：http: //jsfiddle.net/claudiamarques/KasTN/1/

这是我怀疑问题可能出在的js：

$("#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);
    });
});​

我正在从#polaroid img:visible 更改“src”，但不知何故没有永久保存。

有人可以帮帮我吗？

Answer 1

如果我是你，我只会使用 flexslider，所有的工作都为你完成，它有很多选择： http ://www.woothemes.com/flexslider/