source: extensions/Fotorama/template/slideshow.tpl @ 29615

Revision 29615, 5.0 KB checked in by JanisV, 6 years ago (diff)

Replace picture page

Line 
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">
6var image_w = {/literal}{$item_height}{literal}
7var 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}
Note: See TracBrowser for help on using the repository browser.