Magento 1.9 – Replace Zoom Image on Click of More Views

configurable-productmagento-1.9productproduct-imageszoom

The Issue that i am facing is, when you click on more views, the main image gets replaced but the background zoom image remains the same as base image.

You can view the problem on following link,
Select image from more views & try hover on the image.

Here is my code for the app.js file

swapImage: function(targetImage) {
    targetImage = $j(targetImage);
    targetImage.addClass('gallery-image');

    ProductMediaManager.destroyZoom();

    var imageGallery = $j('.product-image-gallery');

    if(targetImage[0].complete) { //image already loaded -- swap immediately

        imageGallery.find('.gallery-image').removeClass('visible');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //reveal new image
        targetImage.addClass('visible');

        //wire zoom on new image
        ProductMediaManager.createZoom(targetImage);

    } else { //need to wait for image to load

        //add spinner
        imageGallery.addClass('loading');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //wait until image is loaded
        imagesLoaded(targetImage, function() {
            //remove spinner
            imageGallery.removeClass('loading');

            //hide old image
            imageGallery.find('.gallery-image').removeClass('visible');

            //reveal new image
            targetImage.addClass('visible');

            //wire zoom on new image
            ProductMediaManager.createZoom(targetImage);
        });

    }
},

wireThumbnails: function() {
    //trigger image change event on thumbnail click
    $j('.product-image-thumbs .thumb-link').click(function(e) {
        e.preventDefault();
        var jlink = $j(this);
        var target = $j('#image-' + jlink.data('image-index'));

        ProductMediaManager.swapImage(target);
    });
},

Best Answer

Hi You can add some custom jQuery for this as your zoom image is not changing Write below code at the end of your js file.

jQuery(document).ready(function(){
jQuery('.product-image-thumbs a.thumb-link img').click(function(){
   setTimeout(function(){ 
    jQuery('.zoomImg').attr('src',jQuery('.gallery-image.visible').attr('data-zoom-image'));
            }, 1000);

  });  });
Related Topic