The page I am creating currently has an image inside a div, and both are set to 700 x 525px. There are a set of links underneath this image div that, when a new link is clicked, the image in the div changes. (Hence, it works like a gallery).

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 until they reach the full size: 2000 x 1500px.

The zooming script I am using is this one, by the way:

My issue is this: when a new link is clicked, and the image in the div is changed, the zoom remains "zoomed in". It doesn't reset back to 700x525px. It stays at whatever the previous image was zoomed in at. I am trying to make the zoom reset to completely zoomed out when a new image is loaded in the div.

Anyone have any ideas? Any help would be greatly appreciated as I am a Javascript and JQuery newbie.

P.S. I am using the latest Jquery, as well.

Here is a glimpse at my coding.

<div id="zoom01" class="zoom minizoompan">
<img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg">

<div class="showcase-links">     
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image1.jpg';return false;">Image 1</a>
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image2.jpg';return false;">Image 2</a>
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image3.jpg';return false;">Image 3</a>

<script type= "text/javascript">
        $(function() {
                    sW: 700,
                    sH: 525,
                    lW: 1400,
                    lH: 1050,
                    lightbox : false,