[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> |
---|
[13940] | 11 | <legend>{'Photo sizes with crop'|@translate}</legend> |
---|
[13052] | 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> |
---|
[13940] | 19 | <p style="margin:0 0 10px 0;padding:0;"> |
---|
| 20 | {'The center of interest is the most meaningful zone in the photo.'|@translate} |
---|
| 21 | {'For photo sizes with crop, such as "Square", Piwigo will do its best to include the center of interest.'|@translate} |
---|
| 22 | {'By default, the center of interest is placed in the middle of the photo.'|@translate} |
---|
| 23 | {'Select a zone with your mouse to define a new center of interest.'|@translate} |
---|
| 24 | </p> |
---|
[13038] | 25 | <input type="hidden" id="l" name="l" value="{if isset($coi)}{$coi.l}{/if}"> |
---|
| 26 | <input type="hidden" id="t" name="t" value="{if isset($coi)}{$coi.t}{/if}"> |
---|
| 27 | <input type="hidden" id="r" name="r" value="{if isset($coi)}{$coi.r}{/if}"> |
---|
| 28 | <input type="hidden" id="b" name="b" value="{if isset($coi)}{$coi.b}{/if}"> |
---|
| 29 | |
---|
| 30 | <img id="jcrop" src="{$U_IMG}" alt="{$ALT}"> |
---|
| 31 | |
---|
| 32 | <p> |
---|
| 33 | <input type="submit" name="submit" value="{'Submit'|@translate}"> |
---|
| 34 | </p> |
---|
[13052] | 35 | </fieldset> |
---|
[13038] | 36 | </form> |
---|
| 37 | |
---|
| 38 | {footer_script} |
---|
| 39 | {literal} |
---|
| 40 | function from_coi(f, total) { |
---|
| 41 | return f*total; |
---|
| 42 | } |
---|
| 43 | |
---|
| 44 | function to_coi(v, total) { |
---|
| 45 | return v/total; |
---|
| 46 | } |
---|
| 47 | |
---|
| 48 | function jOnChange(sel) { |
---|
| 49 | var $img = jQuery("#jcrop"); |
---|
| 50 | jQuery("#l").val( to_coi(sel.x, $img.width()) ); |
---|
| 51 | jQuery("#t").val( to_coi(sel.y, $img.height()) ); |
---|
| 52 | jQuery("#r").val( to_coi(sel.x2, $img.width()) ); |
---|
| 53 | jQuery("#b").val( to_coi(sel.y2, $img.height()) ); |
---|
| 54 | } |
---|
| 55 | function jOnRelease() { |
---|
| 56 | jQuery("#l,#t,#r,#b").val(""); |
---|
| 57 | } |
---|
| 58 | |
---|
| 59 | {/literal} |
---|
| 60 | jQuery("#jcrop").Jcrop( {ldelim} |
---|
[13052] | 61 | boxWidth: 500, boxHeight: 400, |
---|
[13038] | 62 | onChange: jOnChange, |
---|
| 63 | onRelease: jOnRelease |
---|
| 64 | } |
---|
| 65 | {if isset($coi)} |
---|
| 66 | ,function() {ldelim} |
---|
| 67 | var $img = jQuery("#jcrop"); |
---|
| 68 | 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()) ] ); |
---|
| 69 | } |
---|
| 70 | {/if} |
---|
| 71 | ); |
---|
| 72 | {/footer_script} |
---|
| 73 | |
---|