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