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