title: Reset zoom position when a new image is loaded in div
body: <p>The page I am creating currently has a div with an image inside. There are a set of links underneath this image div that, when a new link is clicked, the image in the div changes.</p>
  
  <p>I also have a zooming effect on the image div, so that when the user clicks on the plus/minus symbols, or scrolls with their mouse, they zoom into the image.</p>
  
  <p>The zooming script I am using is this one: <a href="http://lab.gianiaz.com/jquery/gzoom/" rel="nofollow">http://lab.gianiaz.com/jquery/gzoom/</a></p>
  
  <p>My issue is this: when a new link is clicked, and the image changed, the zoom remains "zoomed in". I am trying to make the zoom reset to completely zoomed out when a new image is  loaded in the div.</p>
  
  <p>Anyone have any ideas?</p>
  
  <p>P.S. I am using the latest Jquery, as well.</p>
  
  <p>Here is a glimpse at my coding. </p>
  
  <pre><code>&lt;div id="zoom01" class="zoom minizoompan"&gt;
  &lt;img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div class="showcase-links"&gt;     
  &lt;a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image1.jpg';return false;"&gt;Image 1&lt;/a&gt;
  &lt;a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image2.jpg';return false;"&gt;Image 2&lt;/a&gt;
  &lt;a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image3.jpg';return false;"&gt;Image 3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script type= "text/javascript"&gt;
          /*&lt;![CDATA[*/
          $(function() {
              $("#zoom01").gzoom({
                      sW: 700,
                      sH: 525,
                      lW: 1400,
                      lH: 1050,
                      lightbox : false,
              });
          });
          /*]]&gt;*/
      &lt;/script&gt;
  </code></pre>