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!

score 0 · Accepted Answer · answered May 22 '13 at 20:43

0

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())

answered May 22 '13 at 20:43

Claudio Bredfeldt

1,423
16
27

Tried that, it works initially, but you can only use the magnifying glass once per image then it dissapears completely. I looked at the script while I was using the website, it seems that the zoom element created is called zoom-Obj-0 --- every time you click one of the thumbnails, a new zoom element is created, zoom-Obj-1, zoom-Obj-2, zoom-Obj-3 ect. If there was some way the script could identify the highest zoom-Obj number and remove all the lower zoom-Obj's that would work... – user2121528 May 23 '13 at 19:49
AHHH! I got it, Using the same line you suggested, but rather than putting it in the zoomStop callback, I put it at the begining of the click functions for all the thumbnails. This way each time the image is changed, the .zoomy object is removed in preperation for a new one to be created. Thanks :) – user2121528 May 23 '13 at 20:33

Magnifying glass javascript glitching when used with image veiwer

1 Answers1