I am trying to make the magnifying effect work correctly in a store created in prestashop, but I can only make it work in the first image shown. When another image is selected and you click with the mouse, the cover image is zoomed in, always.
I can not solve this problem. Let's see if anyone is able to tell me what could be the solution. Attached to the subject a picture of what happens and the code used.
Effect that produces: Code of the tpl:
<div class="images-container">
{block name='product_cover'}
<div class="product-cover">
<img id="{$product.id}" class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
<div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
<i class="material-icons zoom-in"></i>
</div>
</div>
{/block}
{block name='product_images'}
<div class="js-qv-mask mask">
<ul class="product-images js-qv-product-images">
{foreach from=$product.images item=image}
<li class="thumb-container">
<img
class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
data-image-medium-src="{$image.bySize.medium_default.url}"
data-image-large-src="{$image.bySize.large_default.url}"
src="{$image.bySize.home_default.url}"
alt="{$image.legend}"
title="{$image.legend}"
width="100"
itemprop="image"
>
</li>
{/foreach}
</ul>
</div>
{/block}
</div>
{hook h='displayAfterProductThumbs'}
Code of the js:
$('.product-cover').find('.js-qv-product-cover').each(function () {
$(this).elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 200
}
);
});
$(".thumb-container").click(function(){
console.log("Click en la minuatura");
$('.product-cover').find('.js-qv-product-cover').each(function () {
$(this).elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 200
}
);
});
});