jQuery: esegue una funzione su una nuova immagine

Question

Sono un novizio di jQuery, quindi la risposta potrebbe essere abbastanza semplice:

Ho un'immagine e vorrei fare diverse cose con essa. Quando un utente fa clic sull'icona 'Zoom', eseguo il plug-in 'imagetool' ( http://code.google.com/p/jquery-imagetool/ ) per caricare una versione più grande dell'immagine. Il plug-in crea un nuovo div attorno all'immagine e consente all'utente di spostarsi all'interno.

Quando un utente fa clic su un'immagine alternativa, sto rimuovendo quella precedente e caricando quella nuova.

Il problema si presenta quando un utente fa clic su un'immagine alternativa, quindi fa clic sul pulsante di zoom: il plug-in imagetool crea il nuovo div, ma l'immagine appare dopo di esso ...

Il codice è il seguente:

// 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;       
});
});

Mi sembra che il plugin imagetool non riesca più a vedere l'immagine #productImage una volta che è stata sostituita con una nuova immagine ... Quindi penso che questo abbia qualcosa a che fare con l'associazione? Come nel caso in cui la nuova immagine viene aggiunta al dom dopo che la pagina è stata caricata, il plug-in iamgetool non può più utilizzarlo correttamente ... giusto? In tal caso, qualche idea su come gestirla?

Answer 1

Wehey! L'ho risolto da solo ...

Risulta se rimuovo completamente il div contenente e quindi lo riscrivo con .html, il plug-in imagetool lo riconosce di nuovo.

Codice modificato per chiunque sia interessato:

$(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

Potresti provare a sottrarre la funzione productZoom.click () a una funzione con nome, e quindi rilegarla dopo essere passati a un'immagine alternativa. Qualcosa del tipo:

// 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;
}

Inoltre, ha inserito entrambi i blocchi ready () nello stesso blocco.

Answer 3

Per prima cosa, ho una domanda, sono i link o le immagini .altPhoto? Causa se le sue immagini allora questa linea è sbagliata

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

dovrebbe essere

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

è l'unica cosa che ho trovato a colpo d'occhio