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 | <script> |
---|
5 | var image_w = {$item_height}; |
---|
6 | var image_h = {$item_height}; |
---|
7 | </script> |
---|
8 | |
---|
9 | <div id="slideshow"> |
---|
10 | <div id="imageHeaderBar"> |
---|
11 | <div class="browsePath"> |
---|
12 | {if isset($U_SLIDESHOW_STOP) } |
---|
13 | [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|translate}</a> ] |
---|
14 | {/if} |
---|
15 | <h2 class="showtitle">{$current.TITLE}</h2> |
---|
16 | </div> |
---|
17 | </div> |
---|
18 | |
---|
19 | <div id="imageToolBar"> |
---|
20 | <div class="imageNumber">{$PHOTO}</div> |
---|
21 | </div> |
---|
22 | |
---|
23 | <div id="content"> |
---|
24 | <div id="theImage"> |
---|
25 | <div class="fotorama" data-startindex="{$current_rank}" data-ratio="16/9" data-auto="false" |
---|
26 | data-width="100%" data-maxheight="100%" data-minheight="200" data-height="{$item_height}" |
---|
27 | data-shadows="{if $Fotorama.shadows}true{else}false{/if}" data-nav="{$Fotorama.nav}" data-fit="{$Fotorama.fit}" |
---|
28 | data-allowfullscreen="{$Fotorama.allowfullscreen}" data-autoplay="{if $Fotorama.autoplay}true{else}false{/if}" |
---|
29 | data-transition="{$Fotorama.transition}" data-stopautoplayontouch="{if $Fotorama.stopautoplayontouch}true{else}false{/if}" |
---|
30 | data-loop="{if $Fotorama.loop}true{else}false{/if}" data-captions="false" data-thumbheight="{$Fotorama.thumbheight}" data-thumbwidth="{$Fotorama.thumbheight}"> |
---|
31 | {foreach from=$items item=thumbnail} |
---|
32 | <a href="{$thumbnail.derivative->get_url()}" |
---|
33 | data-full="{$thumbnail.derivative_big->get_url()}" data-url="{$thumbnail.url}" data-caption="{$thumbnail.TITLE}" |
---|
34 | {if $Fotorama.nav == 'thumbs' || $Fotorama.fullscreen_nav == 'thumbs'}data-thumb="{$thumbnail.derivative_thumb->get_url()}"{/if}> |
---|
35 | </a> |
---|
36 | {/foreach} |
---|
37 | </div> |
---|
38 | </div> |
---|
39 | </div> |
---|
40 | </div> |
---|
41 | |
---|
42 | {footer_script require='jquery'} |
---|
43 | var fullscreen = false; |
---|
44 | jQuery().ready(function() { |
---|
45 | jQuery('.fotorama') |
---|
46 | // Listen to the events |
---|
47 | .on('fotorama:showend ', |
---|
48 | function (e, fotorama, extra) { |
---|
49 | if (!fullscreen) { |
---|
50 | {if isset($replace_picture)} |
---|
51 | history.replaceState(null, null, fotorama.activeFrame['url']); |
---|
52 | {else} |
---|
53 | history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow='); |
---|
54 | jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']); |
---|
55 | {/if} |
---|
56 | |
---|
57 | jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']); |
---|
58 | jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}'); |
---|
59 | document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}'; |
---|
60 | } |
---|
61 | } |
---|
62 | ) |
---|
63 | .on('fotorama:fullscreenenter', |
---|
64 | function (e, fotorama, extra) { |
---|
65 | fotorama.setOptions({ |
---|
66 | nav: "{$Fotorama.fullscreen_nav}", |
---|
67 | {if $Fotorama.enable_caption} |
---|
68 | captions: "true", |
---|
69 | {/if} |
---|
70 | }); |
---|
71 | fotorama.startAutoplay(); |
---|
72 | |
---|
73 | if (jQuery('.fotorama').attr('data-allowfullscreen') == 'native') |
---|
74 | fullscreen = true; |
---|
75 | } |
---|
76 | ) |
---|
77 | .on('fotorama:fullscreenexit', |
---|
78 | function (e, fotorama, extra) { |
---|
79 | {if $Fotorama.only_fullscreen} |
---|
80 | window.location.replace(fotorama.activeFrame['url']); |
---|
81 | {else} |
---|
82 | |
---|
83 | fotorama.setOptions({ |
---|
84 | nav: "{$Fotorama.nav}", |
---|
85 | {if $Fotorama.enable_caption} |
---|
86 | captions: "false", |
---|
87 | {/if} |
---|
88 | }); |
---|
89 | |
---|
90 | {if isset($replace_picture)} |
---|
91 | history.replaceState(null, null, fotorama.activeFrame['url']); |
---|
92 | {else} |
---|
93 | history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow='); |
---|
94 | jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']); |
---|
95 | {/if} |
---|
96 | |
---|
97 | jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']); |
---|
98 | jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}'); |
---|
99 | document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}'; |
---|
100 | |
---|
101 | fullscreen = false; |
---|
102 | {/if} |
---|
103 | } |
---|
104 | ) |
---|
105 | // Initialize fotorama manually |
---|
106 | .fotorama(); |
---|
107 | |
---|
108 | {if $Fotorama.only_fullscreen} |
---|
109 | jQuery('.fotorama').data('fotorama').requestFullScreen(); |
---|
110 | {/if} |
---|
111 | }); |
---|
112 | {/footer_script} |
---|