Avatar cropping using JQuery Jcrop plugin in Rails

Question

I'm working on avatar cropping assignment now by using Jcrop plugin. I now stuck at how can I set the selection box to be a fixed box or not, depending on the user preferences. There is a checkbox at the top of the page where users can select either they want a fixed selection box or a cropping box where users can resize it.

$("#cropbox").Jcrop({
    onChange: showCoords,
    onSelect: showCoords,
    bgOpacity: .5,
    aspectRatio: 1,
    //minSize: [ 400, 400 ],
    //maxSize: [ 400, 400 ],
    setSelect:  getDimensions(),
    bgColor: 'black'
});

By setting both the "minSize" and "maxSize" to [400,400], I managed to set the selection box to a fix size where there is no way for user to resize it.

<input type="checkbox" id="checkbox"/> Fixed to 400px <br />

Next, there is a checkbox where user can either select it to fix the size of the selection box or unselect it so that user can resize the selection box.

I don't know how can I modify the "minSize" and "maxSize" depending on the checkbox selection. How can I modify both of them to [0,0] so that user can resize it...

$('#checkbox').click(function(){
  if (this.checked) {
    this.minSize =  [400,400],
    this.maxSize = [400,400],
  }
  else{
    this.minSize = [0,0],
    this.maxSize = [0,0],
  }
})

Answer 1

You should set this settings to your jcrop element. We accept that jcrop_api is your element you have set earlier with:

var jcrop_api= $('#cropbox').Jcrop({ ... });

Then on check you can send the settings to your jcrop element.

$('#checkbox').click(function(){
      if (this.checked) {
        jcrop_api.setOptions({
          minSize =  [400,400],
          maxSize = [400,400],
        });
      }
      else{
        jcrop_api.setOptions({
          minSize =  [0,0],
          maxSize = [0,0],
        });
      }
    });