This project is hosted in code.google.com so you can download the files and also collaborate with it, here you will be able to add new issues and see how it's going. I want to thank all the collaborations made. click here to get the source code



07/08/2011 Release 1.1
Fix for IE9, also was added two new properties to the image object, X and Y, those could be set at creation time.

06/02/2011 Release 1.1
Change the location of the callbacks, in the documentations says that it comes inside his element, but before were in the root config options, now are inside his elements, e.g. (Selector element contain onSelectorDrag, onSelectorDragStop, onSelectorResize, onSelectorResizeStop) and the images callbacks (Image element contain onZoom, onRotate, onImageDrag)

06/02/2011 Release 1.1
Fix the rotation default value, and setSelector method to the correct element.

05/24/2011 Release 1.1
Fix some issues with the zoom slider. calculation the start position in the slider and the w/h of the image.

10/12/2010 Release 1.1
Fixed issues multiples intances of cropzoom.

10/07/2010 Release 1.1
2 New properties to the selector object, that allow to start with and overlayed image, and don't take off this overlay even if you are dragging or resizeing...

09/04/2010 Release 1.1
A new version was released, this version contain new features like expose the zoom control to another element in the page, a new movement control, snap the image to the container and more.

09/30/2010 Release 1.0.4
Fix made by David Skyba - Using multiples instances of cropzoom broken the plugin, He make a fix for this.

04/17/2010 Release 1.0.4
2 new Properties to de plugin was added, please read below the documentation.
Fix issue when you crop with some degrees and zoomming the crop was not correct, this is a PHP Server file issue not plugin.

03/03/2010 5 new porperties to the selector object, please read below the documentation.

27/02/2010 The last fix broken the drag into FireFox browser so we need to do that only for Webkit browsers.

if (this.options.helper == 'original' && !(/^(?:r|a|f)/).test(this.element.css("position"))){
            if($.browser.safari)
                this.element[0].style.position = 'absolute';
            else
                this.element[0].style.position = 'relative';    
        }

04/02/2010 Fix the drag in Safari and Chrome
I think this is a fix made by me (I'm not sure if this break something else into the other Jquery UI plugins).
The hack is in the line of the jquery-ui.1.7.2.custom.js file

before:
if (this.options.helper == 'original' && !(/^(?:r|a|f)/).test(this.element.css("position")))
this.element[0].style.position = 'relative';
after:
if (this.options.helper == 'original' && !(/^(?:r|a|f)/).test(this.element.css("position")))
this.element[0].style.position = 'absolute';
I think that there is no difference with this change because the draggable plugin make the position to absolute when it is dragged and then changes to relative. Please test and give your feedback. ;)

26/01/2010 Fix the function getExtensionSource
IE8 makes an error in the line _self[0].ownerDocument.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
The Quick fix is add this line into the HTML tag xmlns:v="urn:schemas-microsoft-com:vml".
If this not works you can also try adding this line <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

16/01/2010 First Release

This plugin require: JQuery 1.3+, (CropZoom 1.0 : JQuery UI 1.7+, CropZoom 1.1: JQuery UI 1.8+)


<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
$(document).ready(function(){
          var cropzoom = $('#crop_container2').cropzoom({
            width:400,
            height:300,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            expose:{
                slidersOrientation: 'horizontal',
                zoomElement: '#zoom',
                rotationElement: '#rot',
                elementMovement:'#movement'
            },
            selector:{        
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow'
            },
            image:{
                source:'chicas1024.jpg',
                width:1024,
                height:768,
                minZoom:50,
                maxZoom:200,
                startZoom:40,
                useStartZoomAsMinZoom:true,
                snapToContainer:true
            }
        });
});
                                                    
Type Parameter Name Default Description
Property width 640 Width of the Container
Property Height 480 Height of the Container
Property bgColor #000 Background of the Container
Property overlayColor #000 Color of the overlay layer when drag the selector
Property enableRotation true Enable/Disable the rotation slider
Property enableZoom true Enable/Disable the zoom slider
Property rotationSteps 5 Set the steps for the rotation slider
Property zoomSteps 1 Set the steps for the zoom slider
Method restore this restore the plugin to the original values
Method send this method will send the information to the server for cropping.
Parameters
  • url: location of the server file to process the cropping
  • type: post / get
  • custom: json object to add in the request e.g. {id=1,username='jhon'}
  • onSuccess: callback to get the response of the request.
e.g: cropzoom.send('process.php','POST',{id:1},function(r){ alert(r); });
Type Parameter Name Default Description
Property showPositionsOnDrag true Enable/Disable info of X and Y axis in the selector
Property showDimetionsOnDrag true Enable/Disable info of width and height in the selector
Property borderColor yellow Change the border color of the selector
Property borderColorHover red Change the border color of the selector on mouse over
Property Centered false Center the selector in the container
Property x 0 x axis value from selector
Property y 0 y axis value from selector
Property w 229 width of the selector (you can resize to this value as minimum)
Property h 100 height of the selector (you can resize to this value as minimum)
Property aspectRatio false this keep the aspect ratio of the selector when resize
Property maxWidth null this will be the limit of the selector width
Property maxHeight null this will be the limit of the selector height
Property bgInfoLayer #FFF this will be set the background-color of the info layer that appears over the selector
Property infoFontSize 10 this will be set the font-size of the info layer that appears over the selector
Property infoFontColor blue this will be set the font color of the info layer that appears over the selector
Property startWithOverlay false this will be turn on the dark overlay at start
Property hideOverlayOnDragAndResize true this will be turn on or turn of the dark overlay when you drag or resize.
Method setSelector this method will positioned the selector in the axis given and set the width and height, the last parameter is if this transition will be animated fires when the selector is dragged
Parameters
  • x: value for x axis
  • y: value for y axis
  • w: value for width
  • h: value for height
  • animated: true/false
e.g: cropzoom.setSelector(15,15,200,100,true);
Callback onSelectorDrag fires when the selector is dragged
Parameters
  • object: selector
  • positions: x,y, width and height of the selector
Callback onSelectorDragStop fires when the selector drag stop
Parameters
  • object: selector
  • positions: x,y, width and height of the selector
Callback onSelectorResize fires when the selector is resized
Parameters
  • object: selector
  • positions: x,y, width and height of the selector
Callback onSelectorResizeStop fires when the selector resize stop
Parameters
  • object: selector
  • positions: x,y, width and height of the selector
Type Parameter Name Default Description
Property slidersOrientation horizontal set the direction of the zoom and rotation sliders into the exposed element
Property zoomElement NULL the DOM Element that will contain the zoom slider.
Property rotationElement NULL the DOM Element that will contain the rotation slider
Property elementMovement NULL the DOM Element that will contain the MOVEMENT CONTROL
Property movementSteps 5 number of pixel that the image will move when click on one of the buttons into the MOVEMENT CONTROL
Type Parameter Name Default Description
Property source path of the image to use
Property rotation 0 rotation in degrees of the image
Property x NEW 0 x axis value
Property y NEW 0 y axis value
Property width 0 original width of the image
Property height 0 original height of the image
Property minZoom 10 percent of the minimum zoom of the image
Property maxZoom 150 percent of the maximum zoom of the image
Property startZoom 50 percent of the starting zoom of the image
Property useStartZoomAsMinZoom true use the minZoom property as startZoom promerty startZoom will be ignored
Property snapToContainer false this allow to drag the image into the container boundaries.
Callback onZoom fires when the image is zommed
Parameters
  • object: image
  • positions: x,y, width and height of the image
Callback onRotate fires when the image is rotated
Parameters
  • object: image
  • degrees: number of degrees
Callback onImageDrag fires when the image is dragged
Parameters
  • object: image
  • positions: x,y, width and height of the image