Zoom does not happen correctly when loading Elevatezoom page

Question

When I open the page with the plugin elevateZoom (plugin to zoom image by passing the mouse) it normally displays the images according to what it has to be, but the problem starts when I hover the mouse on the first image. Her zoom box loads the image, not the zoom.

For example, when you hover the mouse over an image you have to display the box with the image increased. But it is happening that the image that serves to zoom appears inside the box.

In order not to do that 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>
<a href="#" 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>
<a href="#" 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

<script type="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>