1

Estoy intentando que funcione correctamente el efecto lupa en una tienda creada en prestashop, pero solo logro hacer que funcione en la primero imagen mostrada. Cuando se selecciona otra imagen y te pones con el ratón encima se visualiza con zoom la imagen de portada, siempre.

No logro soluciona este problema. A ver si alguien es capaz de decirme cual prodria ser la solución. Adjunto a tema una imagen de lo que sucede y el código empleado.

Efecto que produce: introducir la descripción de la imagen aquí Código del 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">&#xE8FF;</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'}

Código del 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
            }
            );
        });
    });

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.