matiasgali / guillotine

jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
http://guillotine.js.org
327 stars 100 forks source link

eventOnChange and onChange callback doesn't work #20

Closed YuriGor closed 9 years ago

YuriGor commented 9 years ago

Hello, thanks for perfect plugin. I am not sure is it bug. if it isn't - you may want add some extra info about this thing to readme.

// code to bug reproduce
var picture = $('#thepicture');
picture.guillotine('remove');//i need this in case of user pick another file
picture.guillotine({width: 400, height: 300});
picture.guillotine({eventOnChange: 'guillotinechange'});
picture.on('guillotinechange', function(ev, data, action){
    //this callback doesn't work
});
picture.guillotine('fit');

//working code
var picture = $('#thepicture');
picture.guillotine('remove');//i need this in case of user pick another file
//event declaration should go before setting size or calling any method
picture.guillotine({eventOnChange: 'guillotinechange'});
picture.on('guillotinechange', function(ev, data, action){
    //this callback works well
});
picture.guillotine({width: 400, height: 300});
picture.guillotine('fit');

Ubuntu 14.04 lts / chrome 39.0.2171.95 (64-bit) / jquery v1.11.1 / Guillotine v1.3.0

$('#thepicture') was loaded by FileReader.readAsDataURL (i am working on image crop/preview before upload) but i think it is'n matter

YuriGor commented 9 years ago

Some details: after calling

picture.guillotine({eventOnChange: 'guillotinechange'});

options

picture.guillotine({width: 300, height: 300});

are ignored And this works fine:

$(this).guillotine({width: 300, height: 300, onChange: function(data, action){
alert('!');
}});
matiasgali commented 9 years ago

You're not setting up the plugin properly.

All the options need to be passed on initialization. The API in the docs describes what you can do after the plugin is initialized.

var picture = $('#thepicture')

// Pass all the options
picture.guillotine({ width: 400, height: 300, eventOnChange: 'guillotinechange' })

// Event listener
picture.on('guillotinechange', function (ev, data, action) { ... })

Please read the docs carefully before submitting issues.