0

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.

Thanks in advance,

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

Darren Riches
  • 149
  • 1
  • 12
  • this sounds very simple to make yourself – Bill Apr 22 '13 at 14:49
  • Hi Billy, I've taken a dozen pre-made scripts and tried to add the fade effect in, but to no avail. This was the closets I got: http://jsfiddle.net/Lr9KK/ - I can't write Javascript from scratch, but I'm 'ok' at editing it. Thanks for your help. – Darren Riches Apr 22 '13 at 14:51
  • http://stackoverflow.com/questions/1977557/jquery-fade-to-new-image should help you – DrColossos Apr 22 '13 at 14:59

1 Answers1

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 selector
jQuery API - .is()
jQuery API - .fadeIn()
jQuery API - .fadeOut()

animuson
  • 53,861
  • 28
  • 137
  • 147
Bill
  • 3,478
  • 23
  • 42
  • Hi Billy, that's fantastic. One slight issue, when you click on a few thumbnails quickly (annoying people will!) it breaks and goes blank. Is there any way to stop them being able to click another thumbnail until it's fully loaded? – Darren Riches Apr 23 '13 at 08:28