具有可更新主图像的缩略图的图库 [英] Gallery with thumbnails that update a main image

问题描述

任何人都知道显示缩略图的任何现有Javascript(或jquery)，当您单击缩略图时，主图像就会更新.

Does any one know of any existing Javascript (or jquery) which displays thumbnails and when you click on a thumbnail a main image updates.

除此之外，关键的要求是，当您单击另一个缩略图时，当前显示的图像会淡出，然后新图像会淡入(因此它们会交叉淡入淡出).

In addition to this the critical requirement is when you click on another thumbnail the currently displayed image faded out and then new image fades in (so they cross fade).

我希望这样做是为了促进照明演示，所以褪色是关键部分.

I'm looking to do this to promote a lighting demonstration, so the fading is the key part.

预先感谢

(希望这是在正确的部分，并且已经正确地询问了！抱歉，如果不是，我是新来的)

(Hope this is in the right section and has been asked correctly! Sorry if it's not, I'm new to this)

推荐答案

我创建了这个，希望对您有所帮助:

I created this, I hope it helps:

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语句中，以检查图像是否在制作动画.我还可以检查是否有两个图像(因为在动画过程中有两个图像，完成后另一个图像被删除了)

To stop people clicking another thumbnail until the current animation has finished, I just wrapped the function in an if statement, to check if the image is animating. I could also have checked if there was two images (as during the animation there are two and when it is finished the other is removed)

$('.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');
        });
    }
});

此处是更新的jsFiddle

来源

jQuery API-:动画选择器
jQuery API-.is()
jQuery API-.fadeIn()
jQuery API-.fadeOut()

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

这篇关于具有可更新主图像的缩略图的图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！