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

Revision 13077, 1.8 KB checked in by plg, 8 years ago (diff)

feature 2564: redesign on photo administration screen.

  • one screen with several tabs (for now: properties + coi)
  • double select boxes for album associations and representation have been converted to simple multiple select boxes with jQuery Chosen
  • more details about the photo in an introduction text
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>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
7
8<form method="post">
9
10<fieldset>
11<legend>{'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<input type="hidden" id="l" name="l" value="{if isset($coi)}{$coi.l}{/if}">
20<input type="hidden" id="t" name="t" value="{if isset($coi)}{$coi.t}{/if}">
21<input type="hidden" id="r" name="r" value="{if isset($coi)}{$coi.r}{/if}">
22<input type="hidden" id="b" name="b" value="{if isset($coi)}{$coi.b}{/if}">
23
24<img id="jcrop" src="{$U_IMG}" alt="{$ALT}">
25
26<p>
27<input type="submit" name="submit" value="{'Submit'|@translate}">
28</p>
29</fieldset>
30</form>
31
32{footer_script}
33{literal}
34function from_coi(f, total) {
35        return f*total;
36}
37
38function to_coi(v, total) {
39        return v/total;
40}
41
42function jOnChange(sel) {
43        var $img = jQuery("#jcrop");
44        jQuery("#l").val( to_coi(sel.x, $img.width()) );
45        jQuery("#t").val( to_coi(sel.y, $img.height()) );
46        jQuery("#r").val( to_coi(sel.x2, $img.width()) );
47        jQuery("#b").val( to_coi(sel.y2, $img.height()) );
48}
49function jOnRelease() {
50        jQuery("#l,#t,#r,#b").val("");
51}
52
53{/literal}
54jQuery("#jcrop").Jcrop( {ldelim}
55        boxWidth: 500, boxHeight: 400,
56        onChange: jOnChange,
57        onRelease: jOnRelease
58        }
59{if isset($coi)}
60        ,function() {ldelim}
61                var $img = jQuery("#jcrop");
62                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()) ] );
63        }
64{/if}
65);
66{/footer_script}
67
Note: See TracBrowser for help on using the repository browser.