Zoom with carousel magnifying glass with Light-Zoom

Asked

Viewed 66 times

1

I used a script to give a zoom effect with magnifying glass on my page, but it works only with an image, when there is more than one the effect is not applied, I do not know very well how to explain, so I will leave the link of the page in development here:

Zoom working when you have an image:

Zoom with an image

Zoom not working, pass the mouse on the sides, the magnifying glass will appear, but without showing the image.

Zoom with image not working

What I did was this:

<div class="col-md-6">
   <!-- MOSTRAR OU NÃO CARROCEL -->                   
   <div <?php if ($ContRegImgPequena > 1) { ?> class="owl-carousel img-carousel" <?php } ?> >
      <?php foreach($ResImagemGrande as $ResImgGrande) {  
         $ImgProduto = substr($ResImgGrande->Caminho,3);                                
         ?>
      <div class="item">
         <a class="btn btn-theme btn-theme-transparent btn-zoom" href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><i class="fa fa-plus"></i></a>
         <a href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><img class="img-responsive light-zoom" src="<?php echo $ImgProduto; ?>" alt=""/></a>
      </div>
      <?php } ?>
   </div>
   <!-- MOSTRAR OU NÃO CARROCEL -->          
   <?php if ($ContRegImgPequena > 1) { ?>        
   <div class="row product-thumbnails">
      <?php 
         $i = -1;   
         foreach($ResImagemPequena as $ResImgPequena) { 
         $i++;  
         $ImgProdutoThumbs = substr($ResImgPequena->CaminhoThumbs,3);   
         ?>
      <div class="col-xs-2 col-sm-2 col-md-3">
         <a href="#" onclick="jQuery('.img-carousel').trigger('to.owl.carousel', [<?php echo $i ?>,300]);"><img src="<?php echo $ImgProdutoThumbs; ?>" alt=""/></a>                            
      </div>
      <?php } ?>  
   </div>
   <?php  } ?>                        
</div>

The code embedded on the page

$(document).ready(function(){
    $('.light-zoom').lightzoom({
        glassSize   : 200,  
        zoomPower : 3,
    });
});
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.