jQuery - exécution d'une fonction sur une nouvelle image

Question

Je suis un novice jQuery, donc la réponse à cela peut être assez simple:

J'ai une image, et je voudrais faire plusieurs choses avec elle. Lorsqu'un utilisateur clique sur une icône "Zoom", je lance le plugin "imagetool" (http://code.google.com/p/jquery-imagetool/) pour charger une version plus grande de l'image. Le plugin crée une nouvelle div autour de l'image et permet à l'utilisateur de faire un panoramique.

Lorsqu'un utilisateur clique sur une autre image, j'enlève l'ancienne et la charge dans la nouvelle.

Le problème vient quand un utilisateur clique sur une autre image, puis clique sur le bouton de zoom - le plugin imagetool crée le nouveau div, mais l'image apparaît après ...

Le code est le suivant:

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

il me semble que le plugin imagetool ne peut plus voir l'image #productImage une fois qu'il a été remplacé par une nouvelle image ... Alors, je pense que cela a quelque chose à voir avec une liaison? Comme dans le cas où la nouvelle image est ajoutée au dom après le chargement de la page, le plugin iamgetool ne peut plus l'utiliser correctement ... est-ce exact? Si oui, des idées pour y faire face?

Answer 1

Wehey! Je l'ai résolu moi-même ...

Il s'avère que si je supprime complètement la div contenant, puis que je la réécris avec .html, le plugin imagetool la reconnaît à nouveau.

Code modifié pour toute personne intéressée:

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

Vous pouvez essayer de rendre abstraite la fonction productZoom.click() à une fonction nommée, puis de la relier après l'avoir remplacée par une autre image. Quelque chose comme:

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

Aussi, roulé vos deux blocs ready() dans le même bloc.

Answer 3

D'abord, j'ai une question, sont les liens .altPhoto ou des images? Parce que si ses images alors cette ligne est mal

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

il devrait être

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

c'est la seule chose que je pouvais trouver en un coup d'oeil