更新主图像的缩略图图库

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()