Fixed bug in the product images component

_dev/js/product.js

@@ -26,6 +26,7 @@ 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() {
@@ -51,9 +52,9 @@ $(document).ready(() => {
       productCover.attr('alt', newSelectedThumb.attr('alt'));
       modalProductCover.attr('alt', newSelectedThumb.attr('alt'));
 
-      // Get data from thumbnail and update cover sources
-      updateSources(productCover, newSelectedThumb.data('image-medium-sources'));
-      updateSources(modalProductCover, newSelectedThumb.data('image-large-sources'));
+      // Update EasyZoom instance
+      const easyZoomApi = $('.easyzoom').data('easyZoom');
+      easyZoomApi.swap(newSelectedThumb.data('image-medium-src'), newSelectedThumb.data('image-large-src'));
     };
 
     $(prestashop.themeSelectors.product.thumb).on('click', (event) => {
@@ -169,6 +170,9 @@ $(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">
+      <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6 w-full h-auto">
         {foreach from=$product.images item=image}
           <li class="thumb-container w-14 md:w-24">
             <img
@@ -47,6 +47,7 @@
               alt="{$image.legend}"
               title="{$image.legend}"
               itemprop="image"
+         
             >
           </li>
         {/foreach}