Jcrop » Handler Demo

Basic event handler demo.

This example ties several form values together with a simple event handler. The form values are updated as the selection is changed, thanks to Jcrop's onChange event handler.

Depending on the speed of your system, this demo may be a bit slower due to the DOM updates required to change the form values. In a real-world situation, use hidden form fields, and use onSelect instead of onChange.

Invocation Code:
$(function(){
	$('#jcrop_target').Jcrop({
		onChange: showCoords,
		onSelect: showCoords
	});
});
When the selection is moved, this function is called:
function showCoords(c)
{
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#w').val(c.w);
	$('#h').val(c.h);
};
(updates form fields via simple jQuery calls)

These demos have been adapted for display on this website. Simplified versions of the same demos (with simplified source code) are included in the archive download.