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 | <input type="checkbox" id="resize" name="resize"{if $Fotorama.resize} checked="checked"{/if}> |
---|
28 | <label for="resize"> |
---|
29 | <b>{'Resize to fit window'|translate}</b> |
---|
30 | </label> |
---|
31 | </li> |
---|
32 | <li> |
---|
33 | <input type="checkbox" id="close_button" name="close_button"{if $Fotorama.close_button} checked="checked"{/if}> |
---|
34 | <label for="close_button"> |
---|
35 | <b>{'Add close button'|translate}</b> |
---|
36 | </label> |
---|
37 | </li> |
---|
38 | <li> |
---|
39 | <label for="fit"> |
---|
40 | <b>{'How to fit an image'|translate}</b> |
---|
41 | </label> |
---|
42 | <select class="categoryDropDown" id="fit" name="fit"> |
---|
43 | <option value="contain"{if $Fotorama.fit == 'contain'} selected{/if}>{'contain'|translate}</option> |
---|
44 | <option value="cover"{if $Fotorama.fit == 'cover'} selected{/if}>{'cover'|translate}</option> |
---|
45 | <option value="scaledown"{if $Fotorama.fit == 'scaledown'} selected{/if}>{'scaledown'|translate}</option> |
---|
46 | <option value="none"{if $Fotorama.fit == 'none'} selected{/if}>{'none'|translate}</option> |
---|
47 | </select> |
---|
48 | </li> |
---|
49 | <li> |
---|
50 | <label for="transition"> |
---|
51 | <b>{'What transition to use'|translate}</b> |
---|
52 | </label> |
---|
53 | <select class="categoryDropDown" id="transition" name="transition"> |
---|
54 | <option value="slide"{if $Fotorama.transition == 'slide'} selected{/if}>{'slide'|translate}</option> |
---|
55 | <option value="crossfade"{if $Fotorama.transition == 'crossfade'} selected{/if}>{'crossfade'|translate}</option> |
---|
56 | <option value="dissolve"{if $Fotorama.transition == 'dissolve'} selected{/if}>{'dissolve'|translate}</option> |
---|
57 | </select> |
---|
58 | </li> |
---|
59 | <li> |
---|
60 | <input type="checkbox" id="clicktransition_crossfade" name="clicktransition_crossfade"{if $Fotorama.clicktransition_crossfade} checked="checked"{/if}> |
---|
61 | <label for="clicktransition_crossfade"> |
---|
62 | <b>{'Use crossfade transition on click'|translate}</b> |
---|
63 | </label> |
---|
64 | </li> |
---|
65 | <li> |
---|
66 | <label for="nav"> |
---|
67 | <b>{'Navigation style'|translate}</b> |
---|
68 | </label> |
---|
69 | <select class="categoryDropDown" id="nav" name="nav"> |
---|
70 | <option value="false"{if $Fotorama.nav == 'false'} selected{/if}>{'false'|translate}</option> |
---|
71 | <option value="dots"{if $Fotorama.nav == 'dots'} selected{/if}>{'dots'|translate}</option> |
---|
72 | <option value="thumbs"{if $Fotorama.nav == 'thumbs'} selected{/if}>{'thumbs'|translate}</option> |
---|
73 | </select> |
---|
74 | </li> |
---|
75 | <li> |
---|
76 | <label for="fullscreen_nav"> |
---|
77 | <b>{'Fullscreen navigation style'|translate}</b> |
---|
78 | </label> |
---|
79 | <select class="categoryDropDown" id="fullscreen_nav" name="fullscreen_nav"> |
---|
80 | <option value="false"{if $Fotorama.fullscreen_nav == 'false'} selected{/if}>{'false'|translate}</option> |
---|
81 | <option value="dots"{if $Fotorama.fullscreen_nav == 'dots'} selected{/if}>{'dots'|translate}</option> |
---|
82 | <option value="thumbs"{if $Fotorama.fullscreen_nav == 'thumbs'} selected{/if}>{'thumbs'|translate}</option> |
---|
83 | </select> |
---|
84 | </li> |
---|
85 | <li> |
---|
86 | <label for="thumbheight"> |
---|
87 | <b>{'Thumbnail height (when present)'|translate}</b> |
---|
88 | </label> |
---|
89 | <input type="number" size="2" maxlength="3" name="thumbheight" value="{$Fotorama.thumbheight}" min="5" max="300" style="width: 50px;"> px |
---|
90 | </li> |
---|
91 | <li> |
---|
92 | <input type="checkbox" id="shadows" name="shadows"{if $Fotorama.shadows} checked="checked"{/if}> |
---|
93 | <label for="shadows"> |
---|
94 | <b>{'Enables shadows'|translate}</b> |
---|
95 | </label> |
---|
96 | </li> |
---|
97 | <li> |
---|
98 | <input type="checkbox" id="autoplay" name="autoplay"{if $Fotorama.autoplay} checked="checked"{/if}> |
---|
99 | <label for="autoplay"> |
---|
100 | <b>{'Enables autoplay'|translate}</b> |
---|
101 | </label> |
---|
102 | </li> |
---|
103 | <li> |
---|
104 | <input type="checkbox" id="stopautoplayontouch" name="stopautoplayontouch"{if $Fotorama.stopautoplayontouch} checked="checked"{/if}> |
---|
105 | <label for="stopautoplayontouch"> |
---|
106 | <b>{'Stops slideshow at any user action with the fotorama'|translate}</b> |
---|
107 | </label> |
---|
108 | </li> |
---|
109 | <li> |
---|
110 | <input type="checkbox" id="loop" name="loop"{if $Fotorama.loop} checked="checked"{/if}> |
---|
111 | <label for="loop"> |
---|
112 | <b>{'Enables loop'|translate}</b> |
---|
113 | </label> |
---|
114 | </li> |
---|
115 | <li> |
---|
116 | <input type="checkbox" id="enable_caption" name="enable_caption"{if $Fotorama.enable_caption} checked="checked"{/if}> |
---|
117 | <label for="enable_caption"> |
---|
118 | <b>{'Show caption with image title'|translate}</b> |
---|
119 | </label> |
---|
120 | </li> |
---|
121 | <li> |
---|
122 | <input type="checkbox" id="replace_picture" name="replace_picture"{if $Fotorama.replace_picture} checked="checked"{/if}> |
---|
123 | <label for="replace_picture"> |
---|
124 | <b>{'Replace picture page'|translate}</b> |
---|
125 | </label> |
---|
126 | </li> |
---|
127 | <li> |
---|
128 | <input type="checkbox" id="replace_picture_only_users" name="replace_picture_only_users"{if $Fotorama.replace_picture_only_users} checked="checked"{/if}> |
---|
129 | <label for="replace_picture_only_users"> |
---|
130 | <b>{'except an administrator'|translate}</b> |
---|
131 | </label> |
---|
132 | </li> |
---|
133 | </ul> |
---|
134 | </fieldset> |
---|
135 | |
---|
136 | <p class="formButtons"> |
---|
137 | <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}"> |
---|
138 | <input type="submit" name="submit" value="{'Save Settings'|translate}"> |
---|
139 | </p> |
---|
140 | </form> |
---|
141 | |
---|
142 | {footer_script require='jquery'}{literal} |
---|
143 | function update_Fotorama_state() { |
---|
144 | if (jQuery('#allowfullscreen').val() == "false") { |
---|
145 | jQuery('#only_fullscreen').prop('disabled', true); |
---|
146 | jQuery('#only_fullscreen').removeAttr('checked'); |
---|
147 | jQuery('#nav').prop('disabled', false); |
---|
148 | jQuery('#fullscreen_nav').prop('disabled', true); |
---|
149 | } |
---|
150 | else if (jQuery('#allowfullscreen').val() == "native") { |
---|
151 | jQuery('#only_fullscreen').prop('disabled', true); |
---|
152 | jQuery('#only_fullscreen').removeAttr('checked'); |
---|
153 | } |
---|
154 | else { |
---|
155 | jQuery('#only_fullscreen').prop('disabled', false); |
---|
156 | jQuery('#fullscreen_nav').prop('disabled', false); |
---|
157 | } |
---|
158 | |
---|
159 | if(jQuery('#only_fullscreen').is(":checked")) { |
---|
160 | jQuery('#nav').prop('disabled', true); |
---|
161 | jQuery('#resize').prop('disabled', true); |
---|
162 | } |
---|
163 | else { |
---|
164 | jQuery('#nav').prop('disabled', false); |
---|
165 | jQuery('#resize').prop('disabled', false); |
---|
166 | } |
---|
167 | |
---|
168 | if (jQuery('#transition').val() == "slide") { |
---|
169 | jQuery('#clicktransition_crossfade').prop('disabled', false); |
---|
170 | } |
---|
171 | else { |
---|
172 | jQuery('#clicktransition_crossfade').prop('disabled', true); |
---|
173 | jQuery('#clicktransition_crossfade').removeAttr('checked'); |
---|
174 | } |
---|
175 | |
---|
176 | if(jQuery('#replace_picture').is(":checked")) { |
---|
177 | jQuery('#replace_picture_only_users').prop('disabled', false); |
---|
178 | } |
---|
179 | else { |
---|
180 | jQuery('#replace_picture_only_users').prop('disabled', true); |
---|
181 | jQuery('#replace_picture_only_users').removeAttr('checked'); |
---|
182 | } |
---|
183 | } |
---|
184 | jQuery().ready(function() { |
---|
185 | update_Fotorama_state(); |
---|
186 | }); |
---|
187 | jQuery('#allowfullscreen').change(function() { |
---|
188 | update_Fotorama_state(); |
---|
189 | }); |
---|
190 | jQuery('#only_fullscreen').change(function() { |
---|
191 | update_Fotorama_state(); |
---|
192 | }); |
---|
193 | jQuery('#transition').change(function() { |
---|
194 | update_Fotorama_state(); |
---|
195 | }); |
---|
196 | jQuery('#replace_picture').change(function() { |
---|
197 | update_Fotorama_state(); |
---|
198 | }); |
---|
199 | |
---|
200 | {/literal}{/footer_script} |
---|