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

Revision 29384, 4.2 KB checked in by JanisV, 6 years ago (diff)

Added parameter for show caption with image title

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}">
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-title="{$thumbnail['TITLE']}"{if $Fotorama['enable_caption']} data-caption="{$thumbnail['TITLE']}"{/if}>
36          {if $Fotorama['nav'] == 'thumbs' || $Fotorama['fullscreen_nav'] == 'thumbs'}<img src="{$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                history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow=');
53                jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']);
54                jQuery('#slideshow .showtitle').text(fotorama.activeFrame['title']);
55                jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/'+{/literal}{count($items)}{literal});
56                document.title = fotorama.activeFrame['title'] + ' | {/literal}{$GALLERY_TITLE}{literal}';
57              }
58            }
59        )
60        .on('fotorama:fullscreenenter',
61            function (e, fotorama, extra) {
62              fotorama.setOptions({
63                nav: "{/literal}{$Fotorama['fullscreen_nav']}{literal}"
64              });
65              fotorama.startAutoplay();
66
67              if (jQuery('.fotorama').attr('data-allowfullscreen') == 'native')
68                fullscreen = true;
69            }
70        )
71        .on('fotorama:fullscreenexit',
72            function (e, fotorama, extra) {
73              {/literal}{if $Fotorama['only_fullscreen']}{literal}
74              window.location.replace(fotorama.activeFrame['url']);
75              {/literal}{else}{literal}
76
77              fotorama.setOptions({
78                nav: "{/literal}{$Fotorama['nav']}{literal}"
79              });
80
81              history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow=');
82              jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']);
83              jQuery('#slideshow .showtitle').text(fotorama.activeFrame['title']);
84              jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/'+{/literal}{count($items)}{literal});
85              document.title = fotorama.activeFrame['title'] + ' | {/literal}{$GALLERY_TITLE}{literal}';
86
87              fullscreen = false;
88              {/literal}{/if}{literal}
89            }
90        )
91        // Initialize fotorama manually
92        .fotorama();
93     
94      {/literal}{if $Fotorama['only_fullscreen']}{literal}
95      jQuery('.fotorama').data('fotorama').requestFullScreen();
96      {/literal}{/if}{literal}
97  });
98{/literal}{/footer_script}
Note: See TracBrowser for help on using the repository browser.