jQuery how to add to Jcrop zoom feature

Question

JCrop it is a really great plugin but unfortunately lack of Zoom-In Zoom-Out feature.

I would like to know if someone have ever tried to add a Zoom-In Zoom-Out feature in jCrop.

Please post an example of code.

Thanks

Answer 1

This is a very quick and dirty way to do it... In the demo file provided with Jcrop called "crop.php" you'll find this function:

$(function(){
   $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
   });
});

Delete the entire function above and replace it with this:

$(function(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $.Jcrop('#cropbox', {
       aspectRatio: 1,
       onSelect: updateCoords,
       boxWidth: scalex, 
       boxHeight: scaley
   });

   $('#target').click(function() {
      myJcrop.destroy();
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $.Jcrop('#cropbox', {
          aspectRatio: 1,
          onSelect: updateCoords,
          boxWidth: scalex, 
          boxHeight: scaley
      });
   });

});

Then add this somewhere in the body:

Scale X:<input type="text" id="scalex" value="150" style="width:50px;"></input>
Scale Y:<input type="text" id="scaley" value="140" style="width:50px;"></input>
<button id="target">Resize Image</button>