1

Usei um script para dar um efeito de zoom com lupa em minha página, mas ele funciona somente com uma imagem, quando tem mais de uma o efeito não é aplicado, não sei muito bem como explicar, por isso vou deixar o link da página em desenvolvimento aqui:

Zoom funcionando quando tem uma imagem:

Zoom com uma imagem

Zoom não funcionando, passem o mouse nas laterais, a lupa vai aparecer, mas sem mostrar a imagem.

Zoom com a imagem sem funcionar

O que fiz foi isso:

<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>

O código incorporado na página

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

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .