title: jQZoom: innerzoom issue after remove() and img src change
body: <p>I have a magento online store, where I am trying to customize the product page.</p>
  
  <p>On the page I have the main product image with the jqZoom, and also thumbnails generated by the magento, with a onmouseover function that changes the main image.</p>
  
  <p>After long days of changing the functions and codes today I made everything working in my two browsers on the MacBook, but there are issues on any other computer I tested.</p>
  
  <p>On the first load, the first image is loading up perfectly, and the zoom is working, but as soon as you mouseover and the image is changed, the zoom is not working anymore on most of the browsers.</p>
  
  <p>Here's the code:</p>
  
  <p>.
  .
  .
  .
  In the head I added this:</p>
  
  <pre><code>&lt;script&gt;
  $('imgzoom').ready(function(){  
  var options = {  
          zoomType: 'innerzoom',
          title:false,  
          lens:false,  
          preloadImages: true,  
          alwaysOn:false,  
          zoomWidth: 300,  
          zoomHeight: 400,  
          xOffset:10,  
          yOffset:0,  
          position:'left'  
          //...MORE OPTIONS  
  };  
  jQuery('.imgzoom').jqzoom(options);   
  });  
  &lt;/script&gt;
  
  
  &lt;script&gt;
  function startzoom() {  
  var options = {  
          zoomType: 'innerzoom',
          title:false,  
          lens:false,  
          preloadImages: true,  
          alwaysOn:false,  
          zoomWidth: 300,  
          zoomHeight: 400,  
          xOffset:10,  
          yOffset:0,  
          position:'left'  
          //...MORE OPTIONS  
  };  
  jQuery('.imgzoom').jqzoom(options);  
  };  
  &lt;/script&gt;&lt;/code&gt;
  </code></pre>
  
  <p>.
  .
  .
  .
  .
  This is the code that magento uses to generate the link and the big image for the product</p>
  
  <pre><code>&lt;p class="product-image product-image-zoom"&gt;
  &lt;?php
      $_img = '&lt;a href="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'image').'" class="imgzoom" rel="gal1" title="MYTITLE" id="imglink"&gt;&lt;img width="380" name="img1" src="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'image').'" alt="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" /&gt;&lt;/a&gt;';
      $imagehelper = $_helper-&gt;productAttribute($_product, $_img, 'image');
      echo $imagehelper;
  ?&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>.
  .
  .
  .
  .
  And this is the foreach loop in the thumbnails that makes all the changes</p>
  
  <pre><code>    &lt;?php
          ++$i;
      ?&gt;
      &lt;script&gt;
          function update_img&lt;?php echo $i; ?&gt;()
          {
              //$.jqzoom.disable('.jqzoom')
              //jQuery('.imgzoom').disable('.imgzoom');  
              jQuery('.imgzoom').remove();
              jQuery('.product-image.product-image-zoom').append('&lt;?php echo $imagehelper; ?&gt;');
              img1.src =  "&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile()) ?&gt;";
              jQuery('#imglink').attr('href', '&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile()) ?&gt;');
              startzoom(); 
              //jQuery('#imgholdwrap').attr('style', 'width: 100%; height: 570px');
              return false;
  
          }
      &lt;/script&gt;
         &lt;a href="#" onclick="popWin('&lt;?php echo $this-&gt;getGalleryUrl($_image) ?&gt;', 'gallery', 'width=300,height=450,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;"&gt;&lt;img onmouseover="update_img&lt;?php echo $i; ?&gt;()" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile()); ?&gt;" width="66" height="100" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>.
  .
  .
  .</p>
  
  <p>The main problem I believe is that somewhere between where I remove the jQzoom and I add it back, the height of the picture is not transmitted right, as a result the function is called, but the  &amp;  generated by jqZoom have the height of 0, if you change the setting in the code inspector to a certain px value, the zoom will work, but the picture is not being cut correctly</p>
  
  <p>Here's the link to a product on the website:
  <a href="http://zeroinchapparel.com/index.php/men-short-sleeve/grand-experience.html" rel="nofollow">http://zeroinchapparel.com/index.php/men-short-sleeve/grand-experience.html</a></p>
  
  <p>p.s. eventually I need to display the zoom picture as Standard (on the right of the picture) but, when I set the settings to standard, the window with the zoomed picture is not being shown, could there be some issues with the z-index?</p>
  
  <p>p.s.2. This is my first time working with javascript or jQuery, so I'm a complete n00b!</p>
  
  <p>UPDATES:
  Found some code that was incompatible with IE, that was easily replaced</p>
  
  <pre><code> img1.src =  "&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile()) ?&gt;";
  </code></pre>
  
  <p>Turns out IE couldn't assign the new src to the id "IMG1", rewrote it as:</p>
  
  <pre><code>document.getElementById('img1').src =  "&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile()) ?&gt;";
  </code></pre>
  
  <p>Still have issues with some versions of Chrome, that doesn't show the zoomed image on mouseover after src change...</p>