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

Revision 27148, 2.1 KB checked in by JanisV, 6 years ago (diff)

Added basic customization

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<div id="slideshow">
5        <div id="imageHeaderBar">
6          <div class="browsePath">
7                {if isset($U_SLIDESHOW_STOP) }
8                [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ]
9                {/if}
10                        <h2 class="showtitle">{$current.TITLE}</h2>
11          </div>
12        </div>
13
14        <div id="imageToolBar">
15          <div class="imageNumber">{$PHOTO}</div>
16        </div>
17
18        <div id="content">
19        <div id="theImage">
20      <div class="fotorama" data-startindex="{$current_rank}" data-ratio="16/9" data-fit="{$Fotorama['fit']}" data-auto="false"
21        data-width="100%" data-maxheight="100%" data-minheight="200" data-height="{$item_height}" data-shadows="{$Fotorama['shadows']}"
22        data-allowfullscreen="{$Fotorama['allowfullscreen']}" data-autoplay="{if $Fotorama['autoplay']}true{else}false{/if}" data-transition="{$Fotorama['transition']}"
23        data-stopautoplayontouch="{$Fotorama['stopautoplayontouch']}" data-loop="{$Fotorama['stopautoplayontouch']}" data-nav=false>
24      {foreach from=$items item=thumbnail}
25        <a href="{$thumbnail['derivative']->get_url()}" data-full="{$thumbnail['derivative_big']->get_url()}" data-url="{$thumbnail['url']}" data-title="{$thumbnail['TITLE']}"></a>
26      {/foreach}
27      </div>
28        </div>
29        </div>
30<div>
31
32<script>
33  $(function () {
34    $('.fotorama')
35        // Listen to the events
36        .on('fotorama:showend ',
37            function (e, fotorama, extra) {
38              console.log('active frame', fotorama.activeFrame);
39              history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow=');
40              $('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']);
41              $('#slideshow .showtitle').text(fotorama.activeFrame['title']);
42              document.title = fotorama.activeFrame['title'] + ' | {$GALLERY_TITLE}';
43              $('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/'+{count($items)});
44            }
45        )
46        // Initialize fotorama manually
47        .fotorama();
48  });
49</script>
Note: See TracBrowser for help on using the repository browser.