When I open the page with the plugin elevateZoom (plugin to zoom in on the image with the mouse) it normally displays the images according to what has to be, but the problem starts when step mouse on the first image. Her zoom box loads the image, not the zoom.
For example, when you hover over an image you have to display the box with the enlarged image. But it is happening that the image that serves to zoom appears inside the box.
In order not to happen, I have to click on the thumbnail of the image, which is in the navigation.
HTML
<img id="img_01" src="http://localhost/CotasAlteracao/Andre/uploads/shop/238x424_49f0626340b6b5a8c878563458111b8e.jpg"data-zoom-image="http://localhost/CotasAlteracao/Andre/uploads/shop/238x424_49f0626340b6b5a8c878563458111b8e.jpg"/>
<div id="gal1">
<a href="#" class="elevatezoom-gallery" data-image="http://localhost/CotasAlteracao/Andre/uploads/shop/238x424_49f0626340b6b5a8c878563458111b8e.jpg"data-zoom-image="http://localhost/CotasAlteracao/Andre/uploads/shop/854x1280_49f0626340b6b5a8c878563458111b8e.jpg"> <img id="img_01" src="http://localhost/CotasAlteracao/Andre/uploads/shop/67x100_49f0626340b6b5a8c878563458111b8e.jpg"/></a><ahref="#" class="elevatezoom-gallery" data-image="http://localhost/CotasAlteracao/Andre/uploads/shop/238x424_b73b03fb99499385c994f506bd1569a8.jpg" data-zoom-image="http://localhost/CotasAlteracao/Andre/uploads/shop/854x1280_b73b03fb99499385c994f506bd1569a8.jpg"> <img id="img_01" src="http://localhost/CotasAlteracao/Andre/uploads/shop/67x100_b73b03fb99499385c994f506bd1569a8.jpg"/></a><ahref="#" class="elevatezoom-gallery" data-image="http://localhost/CotasAlteracao/Andre/uploads/shop/238x424_78ce1f0dc3f35cfe611e438b0559ca59.jpg" data-zoom-image="http://localhost/CotasAlteracao/Andre/uploads/shop/854x1280_78ce1f0dc3f35cfe611e438b0559ca59.jpg"> <img id="img_01" src="http://localhost/CotasAlteracao/Andre/uploads/shop/67x100_78ce1f0dc3f35cfe611e438b0559ca59.jpg"/></a></div>jQuery
<scripttype="text/javascript">
$(document).ready(function () {
$("#img_01").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"});
$("#img_01").bind("click", function(e) {
var ez = $('#img_01').data('elevateZoom');
ez.closeAll(); //NEW: This function force hides the lens, tint and window
$.fancybox(ez.getGalleryList());
return false;
});
});
</script>