jcrop-holder is duplicated #120

Open
abbasovalex opened this Issue Sep 25, 2013 · 7 comments

8 participants

@abbasovalex

In some cases I got two divs "jcrop-holder". I attempting to understand source problem^ but I can't.
I use bootstrap 2.3.2 , jQuery v1.8.3 (with 1.9 problem exists also ) and Django 1.5

@tsmakalagy

I've got the same problem. Have you found any solution yet?

@lucjan

Experiencing the same issue with panoramic pictures, can't find a solution as well.

@ikido

I've got the same problem, using bootstrap 2.2

Update: I have noticed that this happens when I am calling Jcrop second time for the same image selector. What I did is created image unique id and used that id to call Jcrop, which helped to solve this issue.

@devlaam

I encountered the same issue, but noticed that i forgot to properly wait until the image has loaded. If you get the image from file (for instance by letting your user attach an image), make sure you have a callback function for the loading process from file, as well as for the loading process for the image itself. If the image 'arrives' around the time of the construction there are three possible outcomes: no or only the old image is visible, both images are visible, only the new image is visible. To ensure the latter, have the Jcrop construction in the onLoad callback of the image.

@alexbowers-tecmark

@ikido An alternative solution (and i think the official one), is to use jcrop_api.destroy(); where jcrop_api is a reference to the jcrop object.

This is usually defined as the second parameter of a jcrop initialise.

@paritosharya007
paritosharya007 commented Apr 23, 2016 edited

I am facing the same problem. I have tried what @alexbowers-tecmark suggested and another option, but none seems to work. Here's the code snippet I tried using, but in both cases, I still get duplicate items. I know that this project has not been updates for a long time now, but any pointers will be much appreciated. Just as a background, I have also explored this (link as well):

     $('#BigImageViewer1').Jcrop({
        onChange: setCoordsAndImgSize,
        onSelect: setCoordsAndImgSize,
        minSize: [600, 360]

    }, function () {
        //first attempt
        if (jcrop_api != null) {
            jcrop_api.destroy();
        }
        //second attempt - even this does not work
        $(".jcrop-holder").not(":last").remove();
        jcrop_api = this;
    });
@fenix92
fenix92 commented May 9, 2016 edited

I can see that along the years, the problem remains. And today, it's my turn to experience it !
In few words : I load my page, THEN my picture (jquery $(document).ready()), THEN JCrop (callback function... And my .jcrop-holder is also duplicated.

I first figured out that the whole jquery stuff was loaded 2 times, causing the duplication of the picture. I made a bunch of tests, to try to find why ...

I figured out that the problem was coming only when the image was not 100% loaded. I add this to my code :

// function to create an image object, to be able to handle the loading
function createImgObj(url){
var img = new Image();
img.src=url;
return img;
}
// a link to your image.
var src = "http://whatever.com/myImage.jpg";
// we create the image ... and wait to be 100% Loaded to trigger the JCrop
img_crop = createImgObj(src);
img_crop.onload = function(){
$("#my_image_id").Jcrop();
}

And that's working for me now.
PS - what da hell is this indentation -_-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment