jQuery - running a function on a new image

Question

I'm a jQuery novice, so the answer to this may be quite simple:

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

When a user clicks on an alternative image, I'm removing the old one and loading in the new one.

The problem comes when a user clicks an alternative image, and then clicks on the zoom button - the imagetool plugin creates the 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 once it has been replaced with a new image... So I think this has something to do with binding? As in because the new image is added to the dom after the page has loaded, the iamgetool plugin can no longer use it correctly... is this right? If so, any ideas how to deal with it?

Answer 1

You could try abstracting the productZoom.click() function to a named function, and then re-binding it after changing to an alternate image. Something like:

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

Also, rolled both your ready() blocks into the same block.

Answer 2

First, i have one question, are the .altPhoto links or images? Cause if its images then this line is wrong

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

it should be

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

its the only thing i could find in a glance

Answer 3

Wehey! I've sorted it out myself...

Turns out if I remove the containing div completely, and then rewrite it with .html, the imagetool plugin recognises it again.

Amended code for anyone who's 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;  
  });
});