使縮略圖與圖片庫上的主圖像匹配

我正在創建一個圖庫，爲了讓用戶能夠瀏覽它，我希望他能夠使用縮略圖和next/prev按鈕。他們都在工作，但不在一起。使縮略圖與圖片庫上的主圖像匹配

當我打開圖庫時，它會顯示圖像編號1.但是，如果我使用縮略圖選擇圖像編號4，然後按下「下一個」，它會顯示圖像編號爲2.由於prev/next按鈕正在考慮來自主畫廊的圖片，這是我的#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「源」：可見，但不知何故沒有做它永久。

有人可以幫我嗎？

來源

2012-12-14 Cláudia Marques

你需要存儲的當前位置，這樣就可以提高/減少它，然後找出它涉及的圖像。 – ianbarker

如果我是你，我只希望用flexslider，所有的工作都是爲你做了，它有很多的選擇玩弄： http://www.woothemes.com/flexslider/

來源

2012-12-14 15:22:05

謝謝西蒙！這是一個很好的建議，我一定會查看它，但此刻我真的很想知道我哪裏錯了。特別是現在我已經非常接近寫我自己的畫廊。 –

像伊恩說的那樣存儲你的位置。因此，設置一個說變量pos的變量，然後當您單擊縮略圖時，將var更改爲正確的位置，當您向前或向後點擊時也是如此。 –

我明白你在說什麼的邏輯，但我真的不知道該怎麼做。想你可以給我一個小例子..？ –

使縮略圖與圖片庫上的主圖像匹配

回答

相關問題