Cropping Multiple Picture using JCrop

Question

I'm using JCrop for cropping of images. JCrop is an image cropping plugin. A page contains 3 images to be cropped.

This is how I initiliaze an array for jcrop:

var jcrop = [];

then I have:

$('img.picture').each(function(){
    imgcrop = $(this);
    imgcrop.Jcrop({
        bgColor: 'white',
        aspectRatio: 1
    }, function(){
        jcrop.push(this);
        });
});

The problem is that when I have jcrop[1].setImage( '/image/no-picture.jpg' ); it sometimes changes the first or third image.

$('div.deletePhoto a').bind('click', function(e){
    e.preventDefault();
    var index =$('div.deletePhoto').index($(this).parent());

    $.post('/deletePicture', function(data){
        alert(index);
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    });
});

Variable index is ok, but jcrop[index] is not.

HTML:

    <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

How can I fix it?

you are doing it in a loop?, maybe if you do it out of a loop it will work?, in case if you need to change only the jcrop[1] image — Rustam Kichinsky, Oct 22 '12 at 05:40
can you show the code where you are using the jcrop[1].setImage ? — Rustam Kichinsky, Oct 22 '12 at 05:44
"it sometimes changes the first or third image." - what mean changes?, and also its seems like you set the param blobkey - is he right? — Rustam Kichinsky, Oct 22 '12 at 05:54
blobkey is not part of the code. I mean the jcrop set was not correct. If index=1, im expecting that the 2nd image will be set but sometimes its not. The first or 3rd image instead of the 2nd image. — JR Galia, Oct 22 '12 at 05:58

Rustam Kichinsky · Answer 1 · 2012-10-22T07:05:17.190

$('img.picture').each(function(){
    imgcrop = $(this);
    imgcrop.Jcrop({
        bgColor: 'white',
        aspectRatio: 1
    }, function(){

        jcrop.push($(this)); //the $(this) is important

        });
});

and

$('div.deletePhoto a').bind('click', function(e){
    e.preventDefault();

    var index = $('div.deletePhoto').index($(this).parent()); //return it to this

    $.post('/deletePicture', function(data){
        alert(jcrop[index].attr('id'));
        jcrop[index].setImage( '/image/no-picture.jpg' );
        jcrop[index].disable();
    });
});

html:

 <!-- pictures -->
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_1" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_2" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>
    <div class="blu_3">
        <div class="imgWrapper">
            <img class="blu_10 picture" id="img_3" />
            <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div>
        </div>
        <input class="crop" type="button" value="crop" />
    </div>

so i have set to every img tag an id="img_1", id="img_2", img="img_3", with the code above ii checked it and it work right, every image selected is the right id..

I changed it already. It is the same. I got the correct value of index. — JR Galia, Oct 22 '12 at 06:46
try to alert(jcrop[index].attr('id')) - it will show the right ids, and then the setImage shut work properly on every image you select from the html page — Rustam Kichinsky, Oct 22 '12 at 07:06

Cropping Multiple Picture using JCrop

1 Answers1