Zoom with magnifying glass for car with Light-Zoom

0

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

Zooming when you have an image:

Zoom with an image

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

Zoom with the 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 in the page

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

});

    
asked by anonymous 14.10.2018 / 01:06

0 answers