_dev/js/product.js

@@ -26,7 +26,6 @@ import $ from 'jquery';
 import prestashop from 'prestashop';
 import ProductSelect from './components/product-select';
 import updateSources from './components/update-sources';
-import EasyZoom from './easyzoom'; 
 
 $(document).ready(() => {
   function coverImage() {
@@ -52,9 +51,9 @@ $(document).ready(() => {
       productCover.attr('alt', newSelectedThumb.attr('alt'));
       modalProductCover.attr('alt', newSelectedThumb.attr('alt'));
 
-      // Update EasyZoom instance
-      const easyZoomApi = $('.easyzoom').data('easyZoom');
-      easyZoomApi.swap(newSelectedThumb.data('image-medium-src'), newSelectedThumb.data('image-large-src'));
+      // Get data from thumbnail and update cover sources
+      updateSources(productCover, newSelectedThumb.data('image-medium-sources'));
+      updateSources(modalProductCover, newSelectedThumb.data('image-large-sources'));
     };
 
     $(prestashop.themeSelectors.product.thumb).on('click', (event) => {
@@ -170,9 +169,6 @@ $(document).ready(() => {
   imageScrollBox();
   addJsProductTabActiveSelector();
 
-  // Initialize EasyZoom
-  const $easyzoom = $('.easyzoom').easyZoom();
-
   prestashop.on('updatedProduct', (event) => {
     createInputFile();
     coverImage();

templates/catalog/_partials/product-cover-thumbnails.tpl

@@ -36,7 +36,7 @@
 
   {block name='product_images'}
     <div class="js-qv-mask mask" >
-      <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6 w-full h-auto">
+      <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6">
         {foreach from=$product.images item=image}
           <li class="thumb-container w-14 md:w-24">
             <img
@@ -47,7 +47,6 @@
               alt="{$image.legend}"
               title="{$image.legend}"
               itemprop="image"
-         
             >
           </li>
         {/foreach}