Using picture.guillotine('remove') does not work properly

[Benjamin Rojas]

I am using an example that came from the demo site, however I am trying to change images on the fly.  When I change the source of the image, the guillotine plugin reloads, however it does not remove the previous instance.  When this happens, rotating, and zooming are all messed up.

This is the code I am using:

var picture = $('#profile-photo');
picture.on('load', function(){
  picture.guillotine('remove');
  // Initialize plugin (with custom event)
  picture.guillotine({
    eventOnChange: 'guillotinechange',
    width: 130,
    height: 182,
  });
  picture.guillotine('fit').guillotine('center');
  // Display inital data
  var data = picture.guillotine('getData');
  for(var key in data) { $('#'+key).html(data[key]); }
  // Bind button actions
  $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
  $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
  $('#fit').click(function(){ picture.guillotine('fit'); });
  $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
  $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
  // Update data on change
  picture.on('guillotinechange', function(ev, data, action) {
    data.scale = parseFloat(data.scale.toFixed(4));
    for(var k in data) { $('#'+k).html(data[k]); }
  });
});
var options = {
  uploadUrl: '/crm/<?php echo $client->pk(); ?>/employees/upload_profile_photo/<?php echo $model_pk; ?>',
  onFileDrop: function() {
   
  },
  onAfterUpload: function() {
   
  }
};

Any thoughts?

I am just changing the URL of the image like this:

$('#profile-photo').attr('src', 'http://newimageurl');

[Benjamin Rojas]

Ok, so it looks like the issue stems from the bindings being bound multiple times.  Because I don't destroy the bindings on rotate and zoom, they trigger the guillotine action again and again.  I just moved them outside of the .load() function and that fixed. the issue.

[mgag....@gmail.com]

Hi Benjamin, you beat me to it!

Issue #5 outlines the same problem and solution.

Thanks for posting this here instead of the issue tracker.

Happy coding!