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 not working, pass the mouse on the sides, the magnifying glass will appear, but without showing the image.
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,
});
});