1 | <div class="titrePage"> |
---|
2 | <h2>Fotorama</h2> |
---|
3 | </div> |
---|
4 | |
---|
5 | <form action="" method="post" class="properties"> |
---|
6 | |
---|
7 | <fieldset id="Fotorama"> |
---|
8 | <legend>{'Configuration'|@translate}</legend> |
---|
9 | <ul> |
---|
10 | <li> |
---|
11 | <label for="allowfullscreen"> |
---|
12 | <b>{'Allows fullscreen'|@translate}</b> |
---|
13 | </label> |
---|
14 | <select class="categoryDropDown" id="allowfullscreen" name="allowfullscreen"> |
---|
15 | <option value="false"{if $Fotorama.allowfullscreen == 'false'} selected{/if}>{'false'|@translate}</option> |
---|
16 | <option value="true"{if $Fotorama.allowfullscreen == 'true'} selected{/if}>{'true'|@translate}</option> |
---|
17 | <option value="native"{if $Fotorama.allowfullscreen == 'native'} selected{/if}>{'native'|@translate}</option> |
---|
18 | </select> |
---|
19 | </li> |
---|
20 | <li> |
---|
21 | <input type="checkbox" id="only_fullscreen" name="only_fullscreen"{if $Fotorama.only_fullscreen} checked="checked"{/if}> |
---|
22 | <label for="only_fullscreen"> |
---|
23 | <b>{'Only fullscreen mode'|@translate}</b> |
---|
24 | </label> |
---|
25 | </li> |
---|
26 | <li> |
---|
27 | <label for="fit"> |
---|
28 | <b>{'How to fit an image'|@translate}</b> |
---|
29 | </label> |
---|
30 | <select class="categoryDropDown" id="fit" name="fit"> |
---|
31 | <option value="contain"{if $Fotorama.fit == 'contain'} selected{/if}>{'contain'|@translate}</option> |
---|
32 | <option value="cover"{if $Fotorama.fit == 'cover'} selected{/if}>{'cover'|@translate}</option> |
---|
33 | <option value="scaledown"{if $Fotorama.fit == 'scaledown'} selected{/if}>{'scaledown'|@translate}</option> |
---|
34 | <option value="none"{if $Fotorama.fit == 'none'} selected{/if}>{'none'|@translate}</option> |
---|
35 | </select> |
---|
36 | </li> |
---|
37 | <li> |
---|
38 | <label for="transition"> |
---|
39 | <b>{'What transition to use'|@translate}</b> |
---|
40 | </label> |
---|
41 | <select class="categoryDropDown" id="transition" name="transition"> |
---|
42 | <option value="slide"{if $Fotorama.transition == 'slide'} selected{/if}>{'slide'|@translate}</option> |
---|
43 | <option value="crossfade"{if $Fotorama.transition == 'crossfade'} selected{/if}>{'crossfade'|@translate}</option> |
---|
44 | <option value="dissolve"{if $Fotorama.transition == 'dissolve'} selected{/if}>{'dissolve'|@translate}</option> |
---|
45 | </select> |
---|
46 | </li> |
---|
47 | <li> |
---|
48 | <label for="nav"> |
---|
49 | <b>{'Fullscreen navigation style'|@translate}</b> |
---|
50 | </label> |
---|
51 | <select class="categoryDropDown" id="nav" name="nav"> |
---|
52 | <option value="false"{if $Fotorama.nav == 'false'} selected{/if}>{'false'|@translate}</option> |
---|
53 | <option value="dots"{if $Fotorama.nav == 'dots'} selected{/if}>{'dots'|@translate}</option> |
---|
54 | <option value="thumbs"{if $Fotorama.nav == 'thumbs'} selected{/if}>{'thumbs'|@translate}</option> |
---|
55 | </select> |
---|
56 | </li> |
---|
57 | <li> |
---|
58 | <label for="fullscreen_nav"> |
---|
59 | <b>{'Fullscreen navigation style'|@translate}</b> |
---|
60 | </label> |
---|
61 | <select class="categoryDropDown" id="fullscreen_nav" name="fullscreen_nav"> |
---|
62 | <option value="false"{if $Fotorama.fullscreen_nav == 'false'} selected{/if}>{'false'|@translate}</option> |
---|
63 | <option value="dots"{if $Fotorama.fullscreen_nav == 'dots'} selected{/if}>{'dots'|@translate}</option> |
---|
64 | <option value="thumbs"{if $Fotorama.fullscreen_nav == 'thumbs'} selected{/if}>{'thumbs'|@translate}</option> |
---|
65 | </select> |
---|
66 | </li> |
---|
67 | <li> |
---|
68 | <label for="thumbheight"> |
---|
69 | <b>{'Tumbnail height (when present)'|@translate}</b> |
---|
70 | </label> |
---|
71 | <input type="number" size="2" maxlength="3" name="thumbheight" value="{$Fotorama.thumbheight}" min="5" max="300" style="width: 50px;"> px |
---|
72 | </li> |
---|
73 | <li> |
---|
74 | <input type="checkbox" id="shadows" name="shadows"{if $Fotorama.shadows} checked="checked"{/if}> |
---|
75 | <label for="shadows"> |
---|
76 | <b>{'Enables shadows'|@translate}</b> |
---|
77 | </label> |
---|
78 | </li> |
---|
79 | <li> |
---|
80 | <input type="checkbox" id="autoplay" name="autoplay"{if $Fotorama.autoplay} checked="checked"{/if}> |
---|
81 | <label for="autoplay"> |
---|
82 | <b>{'Enables autoplay'|@translate}</b> |
---|
83 | </label> |
---|
84 | </li> |
---|
85 | <li> |
---|
86 | <input type="checkbox" id="stopautoplayontouch" name="stopautoplayontouch"{if $Fotorama.stopautoplayontouch} checked="checked"{/if}> |
---|
87 | <label for="stopautoplayontouch"> |
---|
88 | <b>{'Stops slideshow at any user action with the fotorama'|@translate}</b> |
---|
89 | </label> |
---|
90 | </li> |
---|
91 | <li> |
---|
92 | <input type="checkbox" id="loop" name="loop"{if $Fotorama.loop} checked="checked"{/if}> |
---|
93 | <label for="loop"> |
---|
94 | <b>{'Enables loop'|@translate}</b> |
---|
95 | </label> |
---|
96 | </li> |
---|
97 | <li> |
---|
98 | <input type="checkbox" id="enable_caption" name="enable_caption"{if $Fotorama.enable_caption} checked="checked"{/if}> |
---|
99 | <label for="enable_caption"> |
---|
100 | <b>{'Show caption with image title'|@translate}</b> |
---|
101 | </label> |
---|
102 | </li> |
---|
103 | </ul> |
---|
104 | </fieldset> |
---|
105 | |
---|
106 | <p class="formButtons"> |
---|
107 | <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}"> |
---|
108 | <input type="submit" name="submit" value="{'Save Settings'|@translate}"> |
---|
109 | </p> |
---|
110 | </form> |
---|
111 | |
---|
112 | {footer_script require='jquery'}{literal} |
---|
113 | function update_Fotorama_state() { |
---|
114 | if (jQuery('#allowfullscreen').val() == "false") { |
---|
115 | jQuery('#only_fullscreen').prop('disabled', true); |
---|
116 | jQuery('#only_fullscreen').removeAttr('checked'); |
---|
117 | jQuery('#nav').prop('disabled', false); |
---|
118 | jQuery('#fullscreen_nav').prop('disabled', true); |
---|
119 | } |
---|
120 | else if (jQuery('#allowfullscreen').val() == "native") { |
---|
121 | jQuery('#only_fullscreen').prop('disabled', true); |
---|
122 | jQuery('#only_fullscreen').removeAttr('checked'); |
---|
123 | } |
---|
124 | else { |
---|
125 | jQuery('#only_fullscreen').prop('disabled', false); |
---|
126 | jQuery('#fullscreen_nav').prop('disabled', false); |
---|
127 | } |
---|
128 | |
---|
129 | if(jQuery('#only_fullscreen').is(":checked")) { |
---|
130 | jQuery('#nav').prop('disabled', true); |
---|
131 | } |
---|
132 | else { |
---|
133 | jQuery('#nav').prop('disabled', false); |
---|
134 | } |
---|
135 | } |
---|
136 | jQuery().ready(function() { |
---|
137 | update_Fotorama_state(); |
---|
138 | }); |
---|
139 | jQuery('#allowfullscreen').change(function() { |
---|
140 | update_Fotorama_state(); |
---|
141 | }); |
---|
142 | jQuery('#only_fullscreen').change(function() { |
---|
143 | update_Fotorama_state(); |
---|
144 | }); |
---|
145 | |
---|
146 | {/literal}{/footer_script} |
---|