1 | {combine_css path="plugins/Fotorama/fotorama/fotorama.css"} |
---|
2 | {combine_script id='fotorama' require='jquery' load='header' path='plugins/Fotorama/fotorama/fotorama.js'} |
---|
3 | |
---|
4 | {if $Fotorama.close_button} |
---|
5 | {combine_css path="plugins/Fotorama/template/close_button.css"} |
---|
6 | {/if} |
---|
7 | {if $Fotorama.info_button} |
---|
8 | {combine_css path="plugins/Fotorama/template/info_button.css"} |
---|
9 | {/if} |
---|
10 | |
---|
11 | <div class="fotorama" data-startindex="{$current_rank}" data-ratio="16/9" data-auto="false" |
---|
12 | data-width="100%" data-maxheight="100%" data-minheight="200" data-height="{$item_height}" |
---|
13 | data-shadows="{if $Fotorama.shadows}true{else}false{/if}" data-nav="{$Fotorama.nav}" data-fit="{$Fotorama.fit}" |
---|
14 | data-allowfullscreen="{$Fotorama.allowfullscreen}" data-autoplay="{if $Fotorama.autoplay}{$Fotorama.period}{else}false{/if}" |
---|
15 | data-transition="{$Fotorama.transition}" data-stopautoplayontouch="{if $Fotorama.stopautoplayontouch}true{else}false{/if}" |
---|
16 | data-loop="{if $Fotorama.loop}true{else}false{/if}" data-captions="false" data-thumbheight="{$Fotorama.thumbheight}" |
---|
17 | data-thumbwidth="{$Fotorama.thumbheight}"{if $Fotorama.clicktransition_crossfade} data-clicktransition="crossfade"{/if} |
---|
18 | data-keyboard="true"> |
---|
19 | {foreach from=$items item=thumbnail} |
---|
20 | <a href="{$thumbnail.derivative->get_url()}" |
---|
21 | data-full="{$thumbnail.derivative_big->get_url()}" data-url="{$thumbnail.url}" data-caption="{$thumbnail.TITLE}" |
---|
22 | {if $Fotorama.nav == 'thumbs' || $Fotorama.fullscreen_nav == 'thumbs'}data-thumb="{$thumbnail.derivative_thumb->get_url()}"{/if}> |
---|
23 | </a> |
---|
24 | {/foreach} |
---|
25 | </div> |
---|
26 | |
---|
27 | {if isset($U_SLIDESHOW_STOP)} |
---|
28 | <a href="{$U_SLIDESHOW_STOP}" class="fotorama__close-icon"></a> |
---|
29 | {/if} |
---|
30 | <a class="fotorama__info-icon"></a> |
---|
31 | |
---|
32 | {footer_script require='jquery'} |
---|
33 | var fullscreen = false; |
---|
34 | jQuery().ready(function() { |
---|
35 | jQuery('.fotorama') |
---|
36 | // Listen to the events |
---|
37 | .on('fotorama:showend ', |
---|
38 | function (e, fotorama, extra) { |
---|
39 | if (!fullscreen) { |
---|
40 | {if isset($replace_picture)} |
---|
41 | history.replaceState(null, null, fotorama.activeFrame['url']); |
---|
42 | {else} |
---|
43 | history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow='); |
---|
44 | jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']); |
---|
45 | {/if} |
---|
46 | |
---|
47 | jQuery('a.fotorama__info-icon').attr('href', fotorama.activeFrame['url']+'&slidestop='); |
---|
48 | |
---|
49 | jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']); |
---|
50 | jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}'); |
---|
51 | document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}'; |
---|
52 | } |
---|
53 | } |
---|
54 | ) |
---|
55 | .on('fotorama:fullscreenenter', |
---|
56 | function (e, fotorama, extra) { |
---|
57 | fotorama.setOptions({ |
---|
58 | nav: "{$Fotorama.fullscreen_nav}", |
---|
59 | {if $Fotorama.enable_caption} |
---|
60 | captions: "true", |
---|
61 | {/if} |
---|
62 | }); |
---|
63 | {if $Fotorama.autoplay or not $Fotorama.only_fullscreen} |
---|
64 | // fotorama.startAutoplay(); |
---|
65 | {/if} |
---|
66 | |
---|
67 | if (jQuery('.fotorama').attr('data-allowfullscreen') == 'native') |
---|
68 | fullscreen = true; |
---|
69 | } |
---|
70 | ) |
---|
71 | .on('fotorama:fullscreenexit', |
---|
72 | function (e, fotorama, extra) { |
---|
73 | {if $Fotorama.only_fullscreen} |
---|
74 | {if isset($replace_picture)} |
---|
75 | window.location.replace('{$U_SLIDESHOW_STOP}'); |
---|
76 | {else} |
---|
77 | window.location.replace(fotorama.activeFrame['url']); |
---|
78 | {/if} |
---|
79 | {else} |
---|
80 | |
---|
81 | fotorama.setOptions({ |
---|
82 | nav: "{$Fotorama.nav}", |
---|
83 | {if $Fotorama.enable_caption} |
---|
84 | captions: "false", |
---|
85 | {/if} |
---|
86 | }); |
---|
87 | |
---|
88 | {if isset($replace_picture)} |
---|
89 | history.replaceState(null, null, fotorama.activeFrame['url']); |
---|
90 | {else} |
---|
91 | history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow='); |
---|
92 | jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']); |
---|
93 | {/if} |
---|
94 | |
---|
95 | jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']); |
---|
96 | jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}'); |
---|
97 | document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}'; |
---|
98 | |
---|
99 | fullscreen = false; |
---|
100 | {/if} |
---|
101 | } |
---|
102 | ) |
---|
103 | // Initialize fotorama manually |
---|
104 | .fotorama(); |
---|
105 | |
---|
106 | {if $Fotorama.only_fullscreen} |
---|
107 | jQuery('.fotorama').data('fotorama').requestFullScreen(); |
---|
108 | {else} |
---|
109 | {if $Fotorama.resize} |
---|
110 | jQuery('.fotorama').data('fotorama').resize({ |
---|
111 | height: jQuery(window).height() |
---|
112 | }); |
---|
113 | jQuery('html,body').animate({ scrollTop: jQuery('.fotorama').offset().top }, 'slow'); |
---|
114 | {/if} |
---|
115 | {/if} |
---|
116 | |
---|
117 | }); |
---|
118 | |
---|
119 | {if $Fotorama.close_button} |
---|
120 | jQuery('.fotorama').on('fotorama:ready', function (e, fotorama) { |
---|
121 | jQuery('.fotorama__close-icon').detach().insertAfter('.fotorama__fullscreen-icon'); |
---|
122 | }); |
---|
123 | {/if} |
---|
124 | {if $Fotorama.info_button} |
---|
125 | jQuery('.fotorama').on('fotorama:ready', function (e, fotorama) { |
---|
126 | jQuery('.fotorama__info-icon').detach().insertAfter('.fotorama__fullscreen-icon'); |
---|
127 | }); |
---|
128 | {/if} |
---|
129 | |
---|
130 | {if $Fotorama.autoplay} |
---|
131 | $(document).keypress(function(e) { |
---|
132 | if(e.which == 43) { |
---|
133 | jQuery('.fotorama').data('fotorama').setOptions({ |
---|
134 | autoplay: jQuery('.fotorama').data('fotorama').options['autoplay'] * 1.4 |
---|
135 | }); |
---|
136 | } |
---|
137 | if(e.which == 45) { |
---|
138 | jQuery('.fotorama').data('fotorama').setOptions({ |
---|
139 | autoplay: jQuery('.fotorama').data('fotorama').options['autoplay'] / 1.4 |
---|
140 | }); |
---|
141 | } |
---|
142 | }); |
---|
143 | {/if} |
---|
144 | {/footer_script} |
---|