Zoom image at PROD page displaying the first image only

[naomi.v]

Hello,

If a product on the PROD page, has more than 1 image, and you click to zoom the second, third... image the image that appears by default is only the first image.

Do you know how can we do to correct it? so, if I click the image, the same image is on the zoom image.

For example this product: https://www.mauriprosailing.com/us/p...30-03-CLA.html

I'm attaching an image for a better explanation.

I hope you can help me!


Naomi

[Matt Zimmermann]

Hi Naomi,

Your site appears to be using a customized of the Suivant ReadyTheme. By default, the functionality you are looking for is available. You may want to have your developer take a look at the site and check to see if the zoom image source is being updated when you click on the thumbnail.

[naomi.v]

Hello Matt,

Do you know which is the file that provides that functionality by default? So maybe I can ask by a ticket to Miva to provide that code so we can take a look at what could be the changes.


Thanks,
Naomi

[Matt Zimmermann]

Hi Naomi,

You could start with the original scripts.js file [ https://github.com/mivaecommerce/rea.../js/scripts.js ] and compare it to what you are using. Specifically, look at the productGallery function [ https://github.com/mivaecommerce/rea...cripts.js#L196 ].

[naomi.v]

Hi Matt,

I've replaced the productGallery function as well as the jsPROD: function with the original ones but still the zoom function is not working as expected.


Naomi

[Matt Zimmermann]

Hi Naomi,

Try comparing your Image Machine code to this. If it is the same, then I would recommend contacting Professional Services so they can take a look at the site.

var gallery = [],
thumbnailIndex = 0;

ImageMachine.prototype.ImageMachine_Generate_Thumb nail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img;

thumbnail = document.createElement('div');
thumbnail.className = 'column one-third medium-one-fourth';
thumbnail.setAttribute('data-index', thumbnailIndex++);

if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;
thumbnail.appendChild(img);
};
if (typeof(closeup_image) == 'string' && closeup_image.length > 0) {
gallery.push({
src: closeup_image,
title: '&mvt:clean:product:name;'
});
};
return thumbnail;
};

[naomi.v]

Hello Matt,

I can't find this function on the scripts.js file. Do you know where it should be?


Thanks,
Naomi

[Matt Zimmermann]

Hi Naomi,

This code is located within the Image Machine section of your product page in the administration portal.

[naomi.v]

Thank you very much Matt, it worked! :)