Question

A jQuery related question – I have a little gallery style script working – a list of thumbnails and associated larger images switching on thumbnail click, like so:

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

My question is: what’s the easiest way of making the image transitions fade between one another rather than a straight switch?

Many thanks in advance for your help.

Answer 1

You can fadeOut the image, then fadeIn in the callback after swapping the src:

$('#thumbs').delegate('img','click', function(){
    var src = this.src.replace('thumb', 'large');
    $("#largeImage").fadeOut(function() {
        this.src = src;
        $(this).fadeIn();
    });
});

Live example using our gravatars | source

(Note that there’s no need to go through attr for src; it’s reflected on the DOM element.)