更新主圖像的縮略圖圖庫

Question

是否有人知道顯示縮略圖的任何現有Javascript（或jquery），以及何時單擊主圖像更新的縮略圖。

除此之外，關鍵要求是當您單擊另一個縮略圖時，當前顯示的圖像淡出，然後新圖像淡入（使其淡入淡出）。

我期待這樣做來推廣照明演示，所以褪色是關鍵部分。

由於提前，

（希望這是在正確的部分，並已正確地問！很抱歉，如果不是的話，我是新來的這個）

Answer 1

我創造了這個，我希望它能幫助：

http://jsfiddle.net/K7ANs/

$('.thumbnail').on('click',function(){ 
    $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />'); 
    $('#imageWrap .active').fadeOut(1000); 
    $('#imageWrap .next').fadeIn(1000, function(){ 
     $('#imageWrap .active').remove(); 
     $(this).addClass('active'); 
    }); 
}); 

更新：

要停止用戶單擊另一個縮略圖直到當前動畫完成，我只是將函數包裝在if語句中，以檢查圖像是否爲動畫。我還可以這樣，如果有兩個圖像（如動畫中有兩個，當它完成了其他被刪除）

$('.thumbnail').on('click',function(){ 
    if (!$('#imageWrap .active').is(':animated')){ 
     $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />'); 
     $('#imageWrap .active').fadeOut(1000, function(){ 
      $(this).remove(); // I moved this from the other function because targeting $(this) is more accurate. 
     }); 
     $('#imageWrap .next').fadeIn(1000, function(){ 
      $(this).addClass('active'); 
     }); 
    } 
}); 

Here is an updated jsFiddle

來源（S）

檢查jQuery API - :animated selector
jQuery API - .is()
jQuery API - .fadeIn()
jQuery API - .fadeOut()