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 | |
---|
6 | <h2>{$TITLE} › {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2> |
---|
7 | |
---|
8 | <form method="post"> |
---|
9 | |
---|
10 | <fieldset> |
---|
11 | <legend>{'Photo sizes with 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> |
---|
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> |
---|
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> |
---|
35 | </fieldset> |
---|
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} |
---|
61 | boxWidth: 500, boxHeight: 400, |
---|
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 | |
---|