4

私はjQueryの初心者なので、これに対する答えは非常に簡単かもしれません:

イメージがあり、それを使っていくつかのことをしたいと考えています。ユーザーが「ズーム」アイコンをクリックすると、「imagetool」プラグイン ( http://code.google.com/p/jquery-imagetool/ ) を実行して、より大きなバージョンの画像を読み込みます。プラグインは、画像の周りに新しい div を作成し、ユーザーがパンできるようにします。

ユーザーが別の画像をクリックすると、古い画像が削除され、新しい画像が読み込まれます。

問題は、ユーザーが別の画像をクリックしてからズーム ボタンをクリックしたときに発生します。imagetool プラグインは新しい div を作成しますが、その後に画像が表示されます...

コードは次のとおりです。

// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(function() {

    // Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    // Run the imagetool plugin on the image
    $(function() {
        $("#productImage").imagetool({
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        });
    });
    return false;
});
});


// Alternative product photos (jQuery)
$(document).ready(function(){
$(".altPhoto").click(function() {

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    // Set new image src
    var altImageSrc = $(this).attr("href");

    $("#productZoom").attr('href', altImageSrc);

    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr({
        src: altImageSrc,
        id: "productImage"
        });

    return false;       
});
});

imagetool プラグインは、新しいイメージに置き換えられると #productImage イメージを表示できなくなるように思えます...だから、これはバインディングと関係があると思いますか? ページがロードされた後に新しい画像が dom に追加されるため、iamgetool プラグインはそれを正しく使用できなくなります...これは正しいですか? もしそうなら、それに対処する方法はありますか？

4

3 に答える 3

7

おい！自分で整理した...

含まれている div を完全に削除してから .html で書き直すと、imagetool プラグインは再びそれを認識します。

興味のある人のための修正されたコード:

$(document).ready(function(){

  // Product Zoom (jQuery)
  $("#productZoom").click(function() {

    $('#productImage').remove();
    $('#productImageDiv').html('<img src="" id="productImage">');

    // Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    // Run the imagetool plugin on the image
    $(function() {
        $("#productImage").imagetool({
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        });
    });

    return false;
  });


  // Alternative product photos (jQuery)
  $(".altPhoto").click(function() {

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    // Set new image src
    var altImageSrc = $(this).attr("href");

    // Set new image Zoom link (from the ID... is that messy?)
    var altZoomLink = $(this).attr("id");

    $("#productZoom").attr('href', altZoomLink);

    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr({
        src: altImageSrc,
        id: "productImage"
        });

    return false;       
  });
});
于 2008-09-25T14:14:07.137 に答える
1

productZoom.click()関数を名前付き関数に抽象化し、別の画像に変更した後に再バインドしてみてください。何かのようなもの： 

// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(bindZoom);

// Alternative product photos (jQuery)
$(".altPhoto").click(function() {

        $('#productImageDiv div.viewport').remove();
        $('#productImage').remove();

        // Set new image src
        var altImageSrc = $(this).attr("href");

        $("#productZoom").attr('href', altImageSrc);

        var img = new Image();
    $(img).load(function () {
                $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr({
                src: altImageSrc,
                id: "productImage"
                });
        $("#productZoom").click(bindZoom);
        return false;

});  
});

function bindZoom() {
        // Set new image src
        var imageSrc = $("#productZoom").attr("href");
        $("#productImage").attr('src', imageSrc);       

        // Run the imagetool plugin on the image
        $(function() {
                $("#productImage").imagetool({
                        viewportWidth: 300,
                        viewportHeight: 300,
                        topX: 150,
                        topY: 150,
                        bottomX: 450,
                        bottomY: 450
                });
        });
        return false;
}

また、両方の ready() ブロックを同じブロックにまとめました。

于 2008-09-25T11:48:48.063 に答える
0

まず、1 つ質問があります。.altPhoto のリンクですか、それとも画像ですか? その画像の場合、この行が間違っている原因

var altImageSrc = $(this).attr("href");

そのはず

var altImageSrc = $(this).attr("src");

それは私が一目で見つけることができる唯一のものです

于 2008-09-25T12:10:52.317 に答える