Question

I currently creating a project, in which a user can click on thumbnail of an image, clicking on the thumbnail, replaces the src of a main image, to show a bigger version of the thumbnail.

$('.alternative_images a').click(function(e){
    var imgSrc = $(this).attr('href');
    $('.mainImage').attr('src', imgSrc);
    $('#image').attr('href', imgSrc);
    $('#image').attr('rel', $(this).attr('title'));

    e.preventDefault();
}); 

This works fine, I have also implemented jqZoom, however looking at a zoomed image, by hovering of the bigger image on the page, always shows the same image, regardless of whether you changed the image, by click on a thumbnails

The page in question is http://mensclothingroom.factoryagency.co.uk/product/ben-fogle-collection-expedition-sock/

Answer 1

You might need to replace the entire element instead of just replacing the src attribute:

$('.mainImage').replaceWith('<img src="'+imgSrc+'" class="mainImage">');