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

Revision 13052, 1.8 KB checked in by rvelices, 8 years ago (diff)

upgrade jquery to 1.7.1
mouseout on index drop down bozes
improved multisize center of interest

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