JQuery - running a function on a new image

Question

I'm a beginner of jQuery, so the answer to this can be quite simple:

I have an image, and I would like to do a few things with it. When the user clicks on the "Zoom" icon, I launch the "imagetool" plugin ( http://code.google.com/p/jquery-imagetool/ ) to download a larger version of the image. The plugin creates a new div around the image and allows the user to move around.

When the user clicks on the alternate image, I delete the old one and upload it to the new one.

The problem occurs when the user clicks on an alternative image and then presses the zoom button - the imagetool plugin creates a new div, but the image appears after it ...

The code is as follows:

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

It seems to me that the imagetool plugin can no longer see the #productImage image after replacing it with a new image ... So I think this has something to do with the binding? Since the new image is added to dom after the page loads, the iamgetool plugin can no longer use it correctly ... is this correct? If so, any ideas how to deal with this?

Answer 1

Wehey! I figured it out myself ...

It turns out that if I completely delete the div containing the div and then rewrite it with .html, the imagetool plugin will recognize it again.

Changed code for anyone interested:

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

You can try to abstract the productZoom.click () function for the named function, and then re-bind it after changing to an alternate image. Sort of:

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

In addition, I dragged your finished () blocks into the same block.

Answer 3

Firstly, I have one question: are there any links or .altPhoto images? Reason if his images do not match this line

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

he should be

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

his only thing I could find at a glance