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

Revision 29621, 4.4 KB checked in by JanisV, 6 years ago (diff)

Code cleanup

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