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.