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

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

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

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

Answer 3

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

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

должно быть

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

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