Skip to content

Instantly share code, notes, and snippets.

@mpj
Created November 24, 2009 09:40
Show Gist options
  • Save mpj/241764 to your computer and use it in GitHub Desktop.
Save mpj/241764 to your computer and use it in GitHub Desktop.
// This sets the bounding box of the
// resize function. If the image is bigger or smaller than this,
// it's forced to this size.
var boxWidth = 500;
var boxHeight = 370;
var jcrop;
var defaultSelection;
function initializeJCrop() {
var realHeight = $("#imgCrop").height();
var realWidth = $("#imgCrop").width();
// Set the initial values incase the user clicks really fast.
jQuery('#x').val(0);
jQuery('#y').val(0);
jQuery('#w').val(realWidth);
jQuery('#h').val(realHeight);
// Select box with 100% width. Height ignored.
defaultSelection = {
x: 0,
y: 0,
x2: realWidth,
y2: 0
}
jcrop = $.Jcrop('#imgCrop', {
aspectRatio: boxWidth / boxHeight,
onSelect: updateCoordinatesOfHiddenFields,
boxWidth: boxWidth,
boxHeight: boxHeight,
setSelect: [0,0,0,0] // Initial selection is 0 pixels on the top left -
// It's the .animateTo call below sets the actual selection.
});
setTimeout("fireInitialSelection()", 1000);
}
function fireInitialSelection() {
// Animates to the initial selection! Wrooom!
jcrop.animateTo([defaultSelection.x, defaultSelection.y, defaultSelection.x2, defaultSelection.y2]);
setTimeout("jcrop.tellSelect()", 500); // Update hidden values after animation completes
}
jQuery(document).ready(function() { $("#imgCrop").load(initializeJCrop) });
function updateCoordinatesOfHiddenFields(newCoordinates) {
jQuery('#x').val(newCoordinates.x);
jQuery('#y').val(newCoordinates.y);
jQuery('#w').val(newCoordinates.w);
jQuery('#h').val(newCoordinates.h);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment