Magnifying glass javascript glitching when used with image veiwer

Question

here is a link to the site I'll be referring to:

http://ellen-paul.com/interiorpage3_new3.html

So I have a simple javascript image viewer which consists of one main image (#largeimage) and a set of thumbnails. When you click a thumbnail the main image is changed to display the thumbnail like this:

$("#largeimage").attr('src','images/interiorcontents3/4.JPG');

I'm also using a script to create a magnifying glass when user clicks on the image, the issue is that if you use the magnifying effect on the first image, then click a thumbnail to view an image that is a different size and use the magnifying glass on that image as well, two magnifying glasses appear, one for each image.

Here is the java for the magnifying glass and the thumbnails:

$("#imgbutton1").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/1.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });

});

$("#imgbutton2").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/2.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton3").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/3.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton4").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/4.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

I've put the magnifying glass script in the function for each of the thumbnails so that it will execute each time, otherwise it just shows the image that was the main image when the page first loaded everytime you try to use the magnifying glass -- solved that problem and created this new one...

To see the glitch go to this link

http://ellen-paul.com/interiorpage3_new3.html

Click the second thumbnail and click the large image to use the magnifying effect. Then click the first thumbnail and use the magnifying effect on it - you'll see as you move your mouse around it's showing a magenfying glass for both images at once.

Any suggestions?? Thanks in advance!

Answer 1

It seems that the Zoomy plugin is missing a destroy() function. On every click, you're adding more instances of zoomy elements.

Try adding $('.zoom').find('.zoomy').remove(); to the zoomStop callback. Or maybe a hide() is enough (instead of remove())