Question

I’m having a problem understanding how callback functions work.

I’m using JCrop to crop many images on a page. JCrop is written under the impression that there may only be 1 image that needs to be cropped:

jQuery(function()
{

              CropMe.Jcrop //CropMe is the class holding the image
              ({
                  aspectRatio: 1,
                  onSelect: updateCoords
              });
          }
      });

When it updates the coordinates via “onSelect” it outputs the coords in the function “updateCoords
” so that they can be read in a form later on submit:

function updateCoords(c)
{

$(‘.x’).val(c.x);

$(‘.y’).val(c.y);

$(‘.w’).val(c.w);

$(‘.h’).val(c.h);
}

the problem is, is that I have MANY Jcrops instantiated under a class, not a specific id. Therefore, when updateCoords is called, it doesn’t know which x,y,w,h values to update.

How would I pass an argument(specifically CropMe) through the option object so that i can change the 4 relevant values

relevant code:jquery.jcrop,js

Answer 1

          CropMe.Jcrop //CropMe is the class holding the image
          ({
              aspectRatio: 1,
              onSelect: function(c) { updateCoords(c, CropMe); }
          });

Then updateCoords would look something like:

function updateCoords(c, cropMeObject) {
  // cropMeObject is the CropMe object
}