title: How to replace elevatezoom image
body: <p>Currently I am using elevatezoom for zooming my product pictures. Its a basic zooming functionality. I have a one big image and others are small. I write a code for that. when you click on small image it replace with big image. Its changed correctly but when I was hover on that image zooming functionality not working write my code here can you please help me out.</p>
  
  <p>html code is</p>
  
  <pre><code>&lt;div class="col-xs-12 col-lg-12"&gt; 
      &lt;img id="main_img" class="img-responsive" src="&lt;?=BASE?&gt;/uploaded_content/product/products_speedboot.jpg" data-zoom-image="&lt;?=BASE?&gt;/uploaded_content/product/products_speedboot.jpg"/&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-12 margin-top-10class other-pic-gallary"&gt;
      &lt;div class="col-lg-4 padding-remove-left"&gt;&lt;img class="img-thumbnail" src="&lt;?=BASE?&gt;/uploaded_content/product/products_speedboot.jpg" /&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 padding-remove-left"&gt;&lt;img class="img-thumbnail" src="&lt;?=BASE?&gt;/uploaded_content/product/Sports_Equipment_Fittings.jpg" /&gt;&lt;/div&gt;
      &lt;div class="col-lg-4 padding-remove-left"&gt;&lt;img class="img-thumbnail" src="&lt;?=BASE?&gt;/uploaded_content/product/products_speedboot.jpg" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script code </p>
  
  <pre><code>$(document).ready(function(){
      $('#main_img').elevateZoom({
          zoomType: "inner",
          cursor: "crosshair",
          zoomWindowFadeIn: 500,
          zoomWindowFadeOut: 750
      });
  
      $('body').on('click','.other-pic-gallary .img-thumbnail',function(){
          //console.log($(this).attr('src'));
          var img_val = $(this).attr('src');
          $('#main_img').attr('src',img_val);
          $('#main_img').attr('data-zoom-image',img_val);
          $('.zoomWindowContainer div').stop().css("background-image","url("+ img_val +")");
          $('#main_img').elevateZoom({
              zoomType: "inner",
              cursor: "crosshair",
              zoomWindowFadeIn: 500,
              zoomWindowFadeOut: 750
          });
  
      });
  });
  </code></pre>