www.webdeveloper.com
Results 1 to 3 of 3

Thread: Reset zoom position when a new image is loaded in div

  1. #1
    Join Date
    Jul 2013
    Posts
    2

    Unhappy Reset zoom position when a new image is loaded in div

    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: http://lab.gianiaz.com/jquery/gzoom/

    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.

    Code:
    <div id="zoom01" class="zoom minizoompan">
    <img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg">
    </div>
    
    <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>
    </div>
    
    <script type= "text/javascript">
            /*<![CDATA[*/
            $(function() {
                $("#zoom01").gzoom({
                        sW: 700,
                        sH: 525,
                        lW: 1400,
                        lH: 1050,
                        lightbox : false,
                });
            });
            /*]]>*/
        </script>

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by mirandaadria View Post
    The zooming script I am using is this one, by the way: http://lab.gianiaz.com/jquery/gzoom/
    Have you tried asking its author?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Jul 2013
    Posts
    2
    Quote Originally Posted by Logic Ali View Post
    Have you tried asking its author?
    Indeed, I have. That was the first thought I had. However, I have not been able to find an email address to contact him with on his site or his company site. Hence, why I am asking for help here.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles