Use multiple croppic in single page about croppic

[Artform]

Each div should have it's own ID. If you are using the same options for each div, just define your options once and use them for each ID. For example:

var yourOptions = {
uploadUrl:'img_save_to_file.php',
cropUrl:'img_crop_to_file.php',
modal:true,
imgEyecandyOpacity:0.4
}
var image1 = new Croppic('image1', yourOptions);
var image2 = new Croppic('image2', yourOptions);
var image3 = new Croppic('image3', yourOptions);

[25ml]

Still won't work!!! Please help :( :(

[Artform]

Share a sample of your code: http://jsfiddle.net/

[25ml]

Interesting,in fiddle I noticed that the other 2 box's upload button is on top right of the page, that's why i didn't notice them in my original page. Even so, why is doing that???

http://jsfiddle.net/25ml/g38sL0t3/1/

By the way, I also don't understaind why the "eye candy" won't work, even on the original page! http://www.croppic.net/

As soon as I click "crop" I can wait all night, nothing happen, IE / Chrome, but the others examples work.

[Artform]

The issue about the images relates to CSS positioning: http://jsfiddle.net/g38sL0t3/2/
#cropContainerModal3, #cropContainerModal2, #cropContainerModal1 { position:relative; }

Regarding Eye Candy, it just means no image appears to reveal crop area. That's my understanding of it. I would need to know what browser you're testing in.

Cropping in the jsfiddle won't result in anything because there is no PHP file.

[25ml]

You did it! ahah, but it's weird, at least the original #cropContainerModal should be on CSS in the first place, would be more easier to add more, I would never find that out on my own.

About Eye Candy, I don't know if I explained myself good enough. So I click the button, browse the file, move to the position I want, and then click crop and he starts making that loading animation like forever. This happens even in the original website.

I'm using IE 11, Chrome latest version and Chrome Cannary 64bits latest version

[Artform]

Interesting! I just tried this myself and see a JS error on line 450 of croppic.js: that.imgEyecandy.hide();

Uncaught TypeError: undefined is not a function croppic.js:450
(anonymous function)

I'm unsure what is triggering this. I'm wondering if it's a problem with the initialization of the container:
var croppicContainerEyecandyOptions = { uploadUrl:'img_save_to_file.php', cropUrl:'img_crop_to_file.php', imgEyecandy:false, // THIS IS THE PROBLEM loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ' } var cropContainerEyecandy = new Croppic('cropContainerEyecandy', croppicContainerEyecandyOptions);

It might be best to use imgEyecandyOpacity:0 to mimic the same effect instead of imgEyecandy:false

[25ml]

Nice I will try that later.

--- // ---

Now a little off-topic: Is it possible, when we upload the picture to capture the filename? via div or just copy the filename to a hidden textbox value ?

Because in regular forms it's easy to capture via $_POST, but in this case we are talking about a DIV.

yes the img_save_to_file.php knows the filename but the php that have the DIV can't retrieve that variable from img_save_to_file.php