與圖像掃描儀一起使用時放大鏡javascript小故障

Question

這是指向我將要引用的網站的鏈接：

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

因此，我有一個簡單的javascript圖像查看器，其中包含一個主圖像（#largeimage）和一組縮略圖。 單擊縮略圖時，主圖像將更改為顯示縮略圖，如下所示：

$（“＃largeimage”）。attr（'src'，'images / interiorcontents3 / 4.JPG'）;

我還使用腳本在用戶單擊圖像時創建放大鏡，問題是，如果您在第一張圖像上使用放大效果，然后單擊縮略圖以查看其他尺寸的圖像並使用在該圖像上的放大鏡也出現了兩個放大鏡，每個圖像一個。

這是放大鏡和縮略圖的Java：

$("#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'}); }  });
});

我已將放大鏡腳本放在每個縮略圖的函數中，以便每次執行，否則，它只會顯示每次嘗試使用放大鏡時首次加載頁面時作為主圖像的圖像-解決了這個問題並創建了這個新的...

要查看故障，請轉到此鏈接

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

單擊第二個縮略圖，然后單擊大圖像以使用放大效果。 然后單擊第一個縮略圖並在其上使用放大效果-將鼠標移到它周圍時，您會看到同時顯示兩個圖像的放大鏡。

有什么建議么？？ 提前致謝！

Answer 1

似乎Zoomy插件缺少destroy（）函數。 每次單擊時，您將添加更多zoomy元素實例。

嘗試添加$('.zoom').find('.zoomy').remove(); 到zoomStop回調。 也許hide（）足夠了（而不是remove（））