jQuery(function($){ var jcrop_api; var bounds, boundx, boundy; $('.targetjcrop').Jcrop({ onChange: showCoords, onSelect: showCoords, onRelease: showCoords, bgColor: 'black', bgOpacity: .4 },function(){ jcrop_api = this; }); $('#form_4i8vut').on('change','input',function(e){ var x1 = $('#field_qc43lh').val(), y1 = $('#field_w7hiiy').val(), x2 = $('#field_46ip2h').val(), y2 = $('#field_dtjj7e').val(); jcrop_api.setSelect([x1,y1,x2,y2]); }); }); // Simple event handler, called from onChange and onSelect // event handlers, as per the Jcrop invocation above function showCoords(c) { $('#field_qc43lh').val(c.x); $('#field_w7hiiy').val(c.y); $('#field_46ip2h').val(c.x2); $('#field_dtjj7e').val(c.y2); $('#field_mcswke').val(c.w); $('#field_w6bmut').val(c.h); }; function clearCoords() { $('#form_4i8vut input').val(''); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; };

Crop Image

Drag cursor over image to resize. You may also edit the fields below. Units are in pixels, and images are a mximum of 560px wide.

Greg: The black box issue has been resolved, but this is just a sample crop from a demo image. I'm tinkering with things on another test page so I don't break things here.

View Cropped Image