jQuery – запуск функции на новом изображении

Question

Я новичок в 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 больше не может его правильно использовать...это правильно?Если да, то есть идеи, как с этим справиться?

Answer 1

Эй!Я сам разобрался...

Оказывается, если я полностью удалю содержащий 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;       
  });
});

Answer 2

Вы можете попробовать абстрагировать продуктZoom.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() в один блок.

Answer 3

Во-первых, у меня есть один вопрос: это ссылки или изображения .altPhoto?Потому что если это изображения, то эта строка неверна

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

должен быть

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

это единственное, что я смог найти с первого взгляда