1

ここに私が参照するサイトへのリンクがあります：

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

そのため、1 つのメイン画像 (#largeimage) と一連のサムネイルで構成される単純な JavaScript 画像ビューアーがあります。サムネイルをクリックすると、メイン画像が変更され、次のようなサムネイルが表示されます。

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

また、ユーザーが画像をクリックしたときに虫眼鏡を作成するスクリプトを使用しています。問題は、最初の画像で拡大効果を使用し、サムネイルをクリックして異なるサイズの画像を表示し、その画像にも虫眼鏡を追加すると、画像ごとに 1 つずつ、合計 2 つの虫眼鏡が表示されます。

虫眼鏡とサムネイルの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

2 番目のサムネイルをクリックし、大きな画像をクリックして拡大効果を使用します。次に、最初のサムネイルをクリックして拡大効果を使用します。マウスを動かすと、両方の画像が同時に拡大鏡で表示されます。

助言がありますか？？前もって感謝します！

4

1 に答える 1

0

Zoomy プラグインに destroy() 関数がないようです。クリックするたびに、ズーム要素のインスタンスがさらに追加されます。

$('.zoom').find('.zoomy').remove();zoomStop コールバックに追加してみてください。または、(remove() の代わりに) hide() で十分かもしれません。

于 2013-05-22T20:43:20.877 に答える