source: trunk/admin/themes/default/template/picture_coi.tpl @ 13038

Revision 13038, 1.7 KB checked in by rvelices, 8 years ago (diff)

multisize - added the coi (still to affine the admin ui + language)
multisize - derivatives can be revuild from a larger derviative instead of the original

Line 
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>{'Center of interest'|@translate}</h2>
7<div>
8<a href="{$U_EDIT}">{'Edit photo information'|@translate}</a>
9</div>
10
11<div>
12<img src="{$U_SQUARE}" alt="{$ALT}">
13<img src="{$U_THUMB}" alt="{$ALT}">
14</div>
15
16<div>
17<form method="post">
18<input type="hidden" id="l" name="l" value="{if isset($coi)}{$coi.l}{/if}">
19<input type="hidden" id="t" name="t" value="{if isset($coi)}{$coi.t}{/if}">
20<input type="hidden" id="r" name="r" value="{if isset($coi)}{$coi.r}{/if}">
21<input type="hidden" id="b" name="b" value="{if isset($coi)}{$coi.b}{/if}">
22
23<img id="jcrop" src="{$U_IMG}" alt="{$ALT}">
24
25<p>
26<input type="submit" name="submit" value="{'Submit'|@translate}">
27</p>
28</form>
29</div>
30
31{footer_script}
32{literal}
33function from_coi(f, total) {
34        return f*total;
35}
36
37function to_coi(v, total) {
38        return v/total;
39}
40
41function jOnChange(sel) {
42        var $img = jQuery("#jcrop");
43        jQuery("#l").val( to_coi(sel.x, $img.width()) );
44        jQuery("#t").val( to_coi(sel.y, $img.height()) );
45        jQuery("#r").val( to_coi(sel.x2, $img.width()) );
46        jQuery("#b").val( to_coi(sel.y2, $img.height()) );
47}
48function jOnRelease() {
49        jQuery("#l,#t,#r,#b").val("");
50}
51
52{/literal}
53jQuery("#jcrop").Jcrop( {ldelim}
54        boxWidth: 400, boxHeight: 400,
55        onChange: jOnChange,
56        onRelease: jOnRelease
57        }
58{if isset($coi)}
59        ,function() {ldelim}
60                var $img = jQuery("#jcrop");
61                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()) ] );
62        }
63{/if}
64);
65{/footer_script}
66
Note: See TracBrowser for help on using the repository browser.