jCrop: Bind select action to button workaround

Here’s how to “bind” the jCrop script to a button. This might be useful if you don’t want to post the new dimensions and resize everytime the original image is selected.

<script type="text/javascript">

$(document).ready(function() {

	var jcrop_api;
	$('#banner-preview-img').Jcrop({
		setSelect: [ 0, 0, 780, 100],
		aspectRatio: 78/10,
		minSize: [780, 100]

	}, function() { jcrop_api = this });

	$('#apply-banner-crop').live('click', function(){
		$.post('/crop-script', { coords: jcrop_api.tellScaled() },
			function (response) {
			if (response.status = 'OK') 
			{
				// ok! (:
			}
			else
			{
				// Something went wrong
			}
		});

		return false;
	});
});
</script>

<div id="banner-preview">
	<h2>Crop your banner</h2>
	<img id="banner-preview-img" src="my_banner.jpg" />

	<a class="button first" href="#" id="apply-banner-crop">Apply</a>
	<a class="button">Cancel</a>
</div>

One thought on “jCrop: Bind select action to button workaround

Leave a Reply

Your email address will not be published. Required fields are marked *