2

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);
    });
},
  • If My answer help you then please accept My answer Or post your own answer which help others – Murtuza Zabuawala Aug 25 '16 at 6:40
1

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);

  });  });
  • This is sort of the solution i was looking for. But it is not working. I have even replaced jQuery with $j but the .zoomImg is not displaying the selected thumb image. How do i display the result of this function? – Tushar Narang Aug 25 '16 at 6:58
  • Ok i updated jQuery('.product-image-thumbs a.thumb-link img') added li jQuery('.product-image-thumbs li a.thumb-link img') Now, it is picking the previous image as zoomImg. Or you have to click on the thumb two times to have that replaced as Zoom imge – Tushar Narang Aug 25 '16 at 7:03
  • Its working now or what? – Murtuza Zabuawala Aug 25 '16 at 7:04
  • It is working after adding li , but it is picking the previous selected image or have to double click on the thumb to have it in effect. – Tushar Narang Aug 25 '16 at 7:12
  • see my updated answer – Murtuza Zabuawala Aug 25 '16 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.