source: extensions/Crop_Image/crop_image.tpl @ 22940

<div class="titrePage">
        <h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
</div>
{if $IN_CROP}

{combine_css path="themes/default/js/plugins/jquery.Jcrop.css"}
{combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'}

{footer_script require="jquery"}
var jcrop_api;

jQuery("#jcrop").Jcrop({ldelim}
                //boxWidth: {$crop.display_width}, 
    //boxHeight: {$crop.display_height},
                boxWidth: 500, boxHeight: 400,
    onChange: jOnChange,
    onRelease: jOnRelease
        },
  function(){ldelim}
    jcrop_api = this;
  });
  
function jOnChange(sel) {ldelim}
        jQuery("input[name='x']").val(sel.x);
        jQuery("input[name='y']").val(sel.y);
        jQuery("input[name='x2']").val(sel.x2);
        jQuery("input[name='y2']").val(sel.y2);
        
  jQuery("input[name='w']").val(sel.w);
        jQuery("input[name='h']").val(sel.h);   
        
  jQuery("#width").html(Math.round(sel.x2-sel.x).toFixed(0));
  jQuery("#height").html(Math.round(sel.y2-sel.y).toFixed(0));
}
  function jOnRelease() {ldelim}
        
}

{/footer_script}

<form method="post" action="">
<fieldset>
  <legend>{'Crop'|@translate} {'photo'|@translate}</legend>
  {'Choose the part of the photo you want to keep'|@translate}<br>
  <img id="jcrop" src="{$picture.banner_src}?{1|rand:200}" width="{$crop.display_width}" height="{$crop.display_height}">
  
  <ul>
    <li><b>{'Width'|@translate}:</b> <span id="width"></span>px</li>
    <li><b>{'Height'|@translate}:</b> <span id="height"></span>px</li>
  </ul>
        
  <input type="hidden" name="x">
  <input type="hidden" name="y">
  <input type="hidden" name="x2">
  <input type="hidden" name="y2">
        <input type="hidden" name="h">
        <input type="hidden" name="w">
  <input type="hidden" name="picture_file" value="{$picture.path}">
  <input type="hidden" name="image_id" value="{$image_id}">
  <input type="submit" name="submit_crop" value="{'Submit'|@translate}">
  <input type="submit" name="cancel_crop" value="{'Cancel'|@translate}">
</fieldset>
</form>
{/if}