Question

How do I correctly access an object once it has been instantiated :

Im implementing jCrop and need to run it twice on the page – (first time sets a default box & second sets the box in the middle of the image)

So I need to create the jCrop object and be able to access its properties later, here is my code so far :

    var myJcrop;
if (cropperInit == true) {
    getjCropSize();

    //Start up jCrop on the image, specifying our function be called when the selection rectangle changes,
    myJcrop = image.Jcrop({
        setSelect: [10, 10, 50, 50],
        aspectRatio: 1,
        onChange: update,
        onSelect: update,
        bgFade: 'true'
    });
} else {
    alert("cropperInit = false");
    myJcrop({
        setSelect: [startX, startY, boxWH, boxWH],
        aspectRatio: 1,
        onChange: update,
        onSelect: update,
        bgFade: 'true'
    });
}

The jCrop object is created OK in the first ‘if block’ but the second ‘else if’ block isn’t working.

EDIT:

After digging about, jCrop has an API for this, its used like this :

var jCropApi;
image.Jcrop({
    setSelect: [10, 10, 10, 10],
    aspectRatio: 1,
    onChange: update,
    onSelect: update,
    bgFade: 'true'
}, function () {
    jCropApi = this;
});

jCropApi.animateTo([startX, startY, boxWH, boxWH]);

Thanks for everyone’s help

Answer 1

In your else clause you’re not using myJcrop = image.Jcrop({, you’re only writing myJcrop({. In other words, you’re only creating an object in the first clause.

You don’t even need to declare objects in each clause, why don’t you just adjust the variables:

var myJcrop;

if (cropperInit == true) {
    getjCropSize();
    var setSelectArray = [10, 10, 50, 50];
} else {
    alert("cropperInit = false");
    // Make sure startX, startY, etc. are set
    var setSelectArray = [startX, startY, boxWH, boxWH],
}
myJcrop = image.Jcrop({
   setSelect: setSelectArray,
   aspectRatio: 1,
   onChange: update,
   onSelect: update,
   bgFade: 'true'
});