[13038] | 1 | {html_head} |
---|
| 2 | <link rel="stylesheet" type="text/css" href="themes/default/js/plugins/jquery.Jcrop.css" /> |
---|
| 3 | {/html_head} |
---|
| 4 | {combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'} |
---|
| 5 | |
---|
[13077] | 6 | <h2>{$TITLE} › {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2> |
---|
[13038] | 7 | |
---|
[13052] | 8 | <form method="post"> |
---|
[13038] | 9 | |
---|
[13052] | 10 | <fieldset> |
---|
| 11 | <legend>{'Crop'|@translate}</legend> |
---|
| 12 | {foreach from=$cropped_derivatives item=deriv} |
---|
| 13 | <img src="{$deriv.U_IMG}" alt="{$ALT}" {$deriv.HTM_SIZE}> |
---|
| 14 | {/foreach} |
---|
| 15 | </fieldset> |
---|
| 16 | |
---|
| 17 | <fieldset> |
---|
| 18 | <legend>{'Center of interest'|@translate}</legend> |
---|
[13038] | 19 | <input type="hidden" id="l" name="l" value="{if isset($coi)}{$coi.l}{/if}"> |
---|
| 20 | <input type="hidden" id="t" name="t" value="{if isset($coi)}{$coi.t}{/if}"> |
---|
| 21 | <input type="hidden" id="r" name="r" value="{if isset($coi)}{$coi.r}{/if}"> |
---|
| 22 | <input type="hidden" id="b" name="b" value="{if isset($coi)}{$coi.b}{/if}"> |
---|
| 23 | |
---|
| 24 | <img id="jcrop" src="{$U_IMG}" alt="{$ALT}"> |
---|
| 25 | |
---|
| 26 | <p> |
---|
| 27 | <input type="submit" name="submit" value="{'Submit'|@translate}"> |
---|
| 28 | </p> |
---|
[13052] | 29 | </fieldset> |
---|
[13038] | 30 | </form> |
---|
| 31 | |
---|
| 32 | {footer_script} |
---|
| 33 | {literal} |
---|
| 34 | function from_coi(f, total) { |
---|
| 35 | return f*total; |
---|
| 36 | } |
---|
| 37 | |
---|
| 38 | function to_coi(v, total) { |
---|
| 39 | return v/total; |
---|
| 40 | } |
---|
| 41 | |
---|
| 42 | function jOnChange(sel) { |
---|
| 43 | var $img = jQuery("#jcrop"); |
---|
| 44 | jQuery("#l").val( to_coi(sel.x, $img.width()) ); |
---|
| 45 | jQuery("#t").val( to_coi(sel.y, $img.height()) ); |
---|
| 46 | jQuery("#r").val( to_coi(sel.x2, $img.width()) ); |
---|
| 47 | jQuery("#b").val( to_coi(sel.y2, $img.height()) ); |
---|
| 48 | } |
---|
| 49 | function jOnRelease() { |
---|
| 50 | jQuery("#l,#t,#r,#b").val(""); |
---|
| 51 | } |
---|
| 52 | |
---|
| 53 | {/literal} |
---|
| 54 | jQuery("#jcrop").Jcrop( {ldelim} |
---|
[13052] | 55 | boxWidth: 500, boxHeight: 400, |
---|
[13038] | 56 | onChange: jOnChange, |
---|
| 57 | onRelease: jOnRelease |
---|
| 58 | } |
---|
| 59 | {if isset($coi)} |
---|
| 60 | ,function() {ldelim} |
---|
| 61 | var $img = jQuery("#jcrop"); |
---|
| 62 | this.animateTo( [from_coi({$coi.l}, $img.width()), from_coi({$coi.t}, $img.height()), from_coi({$coi.r}, $img.width()), from_coi({$coi.b}, $img.height()) ] ); |
---|
| 63 | } |
---|
| 64 | {/if} |
---|
| 65 | ); |
---|
| 66 | {/footer_script} |
---|
| 67 | |
---|