Gallery With Thumbnails That Update A Main Image

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 requirem

Solution 1:

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

Update:

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

Here is an updated jsFiddle

Source(s)

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