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?
$('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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.