image - Jquery JRAC get coordinates -
i've been trying 2 hours can't find way coordinates once have settled on cropped width , height. docs jrac not either. have experiencing getting values width,height,x,y?
you can use jrac same example document add jrac , compare multi jquery plugin because jrac can move image area , jquery plugin can not
jquery
$('.imagearea img').jrac({ 'crop_width': parseint(math.round(cusw / 4) + 4), 'crop_height': parseint(math.round(cush / 4) + 4), 'crop_left': 0, 'crop_top': 0, 'zoom_min': 0, 'zoom_max': 0, 'zoom_label': '', 'viewport_onload': function () { $viewport = this; var inputs = $("div.coords").find("input[type=text]"); var events = ['jrac_crop_x', 'jrac_crop_y', 'jrac_crop_width', 'jrac_crop_height', 'jrac_image_width', 'jrac_image_height']; (var = 0; < events.length; i++) { var event_name = events[i]; // register event element. $viewport.observator.register(event_name, inputs.eq(i)); // attach handler event element. inputs.eq(i).bind(event_name, function (event, $viewport, value) { $(this).val(value); }) // attach handler built-in jquery change event, handler // read user input , apply relevent viewport object. .change(event_name, function (event) { var event_name = event.data; $viewport.$image.scale_proportion_locked = $("div.coords").find("input[type=checkbox]").is(':checked'); $viewport.observator.set_property(event_name, $(this).val()); }) } } }) // react on viewport events. .bind('jrac_events', function (event, $viewport) { //check image crop box valid if (parseint($("#cropx").val()) > -1 && parseint($("#cropy").val()) > -1) { //set background $("#cropw").css('background-color', 'chartreuse'); $("#croph").css('background-color', 'chartreuse'); } else { //set background $("#cropw").css('background-color', 'salmon'); $("#croph").css('background-color', 'salmon'); } });
html
<div class="coords"> <input id="cropx" type="text" value="" style="display: none;" /> <input id="cropy" type="text" value="" style="display: none;" /> <input id="cropw" type="text" value="" style="display: none;" /> <input id="croph" type="text" value="" style="display: none;" /> <input type="checkbox" checked="checked" style="display: none;" /> </div>
Comments
Post a Comment