Question

I have put together a script where the main image loads once clicked on a thumbnail, however currently the image just swaps when clicking from one thumbnail image to another, I would like to have a smoother transition.

My code so far..

 $('#thumbnails ul li').click(function(){
    $('#main').fadeOut(500, function() {
        $('#main').attr('src',$(this).find('img').attr('src').replace('small/', 'large/'));
}).fadeIn(500);
return false;
}); 

With this above code it fades out smoothly, but I can’t get the next image to fade back in when clicked. Do you know what this could be?

Thanks

Answer 1

You should put the $(this).find('img')... outside of the context of the fadeOut method, in your code this doesn’t refer to your desired element (li element), try this:

$('#thumbnails ul li').click(function(){
    var src = $(this).find('img').attr('src').replace('small/', 'large/');
    $('#main').fadeOut(500, function() {
        $(this).attr('src', src);
        $(this).on('load', function(){
            $(this).fadeIn()
        })
    })
    return false;
});