Files
Change Log
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
Requirements and Implementation
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
}
});
});
Documentation
General parameters
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
|
Selector Properties, Callbacks, methods.
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
|
|
Callback | onSelectorDrag |
fires when the selector is dragged
Parameters
|
|
Callback | onSelectorDragStop |
fires when the selector drag stop
Parameters
|
|
Callback | onSelectorResize |
fires when the selector is resized
Parameters
|
|
Callback | onSelectorResizeStop |
fires when the selector resize stop
Parameters
|
Expose Properties.
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 |
Image Properties, Callbacks and methods.
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
|
|
Callback | onRotate |
fires when the image is rotated
Parameters
|
|
Callback | onImageDrag |
fires when the image is dragged
Parameters
|