source: extensions/Fotorama/template/fotorama-content.tpl @ 29918

Last change on this file since 29918 was 29918, checked in by JanisV, 9 years ago

Added info button

  • Property svn:executable set to *
File size: 5.7 KB
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{if $Fotorama.close_button}
5{combine_css path="plugins/Fotorama/template/close_button.css"}
6{/if}
7{if $Fotorama.info_button}
8{combine_css path="plugins/Fotorama/template/info_button.css"}
9{/if}
10
11<div class="fotorama" data-startindex="{$current_rank}" data-ratio="16/9" data-auto="false"
12  data-width="100%" data-maxheight="100%" data-minheight="200" data-height="{$item_height}"
13  data-shadows="{if $Fotorama.shadows}true{else}false{/if}" data-nav="{$Fotorama.nav}" data-fit="{$Fotorama.fit}"
14  data-allowfullscreen="{$Fotorama.allowfullscreen}" data-autoplay="{if $Fotorama.autoplay}{$Fotorama.period}{else}false{/if}"
15  data-transition="{$Fotorama.transition}" data-stopautoplayontouch="{if $Fotorama.stopautoplayontouch}true{else}false{/if}"
16  data-loop="{if $Fotorama.loop}true{else}false{/if}" data-captions="false" data-thumbheight="{$Fotorama.thumbheight}"
17  data-thumbwidth="{$Fotorama.thumbheight}"{if $Fotorama.clicktransition_crossfade} data-clicktransition="crossfade"{/if}
18  data-keyboard="true">
19{foreach from=$items item=thumbnail}
20  <a href="{$thumbnail.derivative->get_url()}"
21    data-full="{$thumbnail.derivative_big->get_url()}" data-url="{$thumbnail.url}" data-caption="{$thumbnail.TITLE}"
22    {if $Fotorama.nav == 'thumbs' || $Fotorama.fullscreen_nav == 'thumbs'}data-thumb="{$thumbnail.derivative_thumb->get_url()}"{/if}>
23  </a>
24{/foreach}
25</div>
26
27{if isset($U_SLIDESHOW_STOP)}
28<a href="{$U_SLIDESHOW_STOP}" class="fotorama__close-icon"></a>
29{/if}
30<a class="fotorama__info-icon"></a>
31
32{footer_script require='jquery'}
33  var fullscreen = false;
34  jQuery().ready(function() {
35    jQuery('.fotorama')
36        // Listen to the events
37        .on('fotorama:showend ',
38            function (e, fotorama, extra) {
39              if (!fullscreen) {
40                {if isset($replace_picture)}
41                history.replaceState(null, null, fotorama.activeFrame['url']);
42                {else}
43                history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow=');
44                jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']);
45                {/if}
46
47                jQuery('a.fotorama__info-icon').attr('href', fotorama.activeFrame['url']+'&slidestop=');
48
49                jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']);
50                jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}');
51                document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}';
52              }
53            }
54        )
55        .on('fotorama:fullscreenenter',
56            function (e, fotorama, extra) {
57              fotorama.setOptions({
58                nav: "{$Fotorama.fullscreen_nav}",
59                {if $Fotorama.enable_caption}
60                captions: "true",
61                {/if}
62              });
63              {if $Fotorama.autoplay or not $Fotorama.only_fullscreen}
64//              fotorama.startAutoplay();
65              {/if}
66
67              if (jQuery('.fotorama').attr('data-allowfullscreen') == 'native')
68                fullscreen = true;
69            }
70        )
71        .on('fotorama:fullscreenexit',
72            function (e, fotorama, extra) {
73              {if $Fotorama.only_fullscreen}
74              {if isset($replace_picture)}
75              window.location.replace('{$U_SLIDESHOW_STOP}');
76              {else}
77              window.location.replace(fotorama.activeFrame['url']);
78              {/if}
79              {else}
80
81              fotorama.setOptions({
82                nav: "{$Fotorama.nav}",
83                {if $Fotorama.enable_caption}
84                captions: "false",
85                {/if}
86              });
87
88              {if isset($replace_picture)}
89              history.replaceState(null, null, fotorama.activeFrame['url']);
90              {else}
91              history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow=');
92              jQuery('#slideshow .browsePath a').attr('href', fotorama.activeFrame['url']);
93              {/if}
94
95              jQuery('#slideshow .showtitle').text(fotorama.activeFrame['caption']);
96              jQuery('#slideshow .imageNumber').text((fotorama.activeFrame['i'])+'/{count($items)}');
97              document.title = fotorama.activeFrame['caption'] + ' | {$GALLERY_TITLE|escape:javascript}';
98
99              fullscreen = false;
100              {/if}
101            }
102        )
103        // Initialize fotorama manually
104        .fotorama();
105
106    {if $Fotorama.only_fullscreen}
107    jQuery('.fotorama').data('fotorama').requestFullScreen();
108    {else}
109      {if $Fotorama.resize}
110      jQuery('.fotorama').data('fotorama').resize({
111        height: jQuery(window).height()
112      });
113      jQuery('html,body').animate({ scrollTop: jQuery('.fotorama').offset().top }, 'slow');
114      {/if}
115    {/if}
116 
117  });
118
119  {if $Fotorama.close_button}
120  jQuery('.fotorama').on('fotorama:ready', function (e, fotorama) {
121    jQuery('.fotorama__close-icon').detach().insertAfter('.fotorama__fullscreen-icon');
122  });
123  {/if}
124  {if $Fotorama.info_button}
125  jQuery('.fotorama').on('fotorama:ready', function (e, fotorama) {
126    jQuery('.fotorama__info-icon').detach().insertAfter('.fotorama__fullscreen-icon');
127  });
128  {/if}
129 
130  {if $Fotorama.autoplay}
131  $(document).keypress(function(e) {
132    if(e.which == 43) {
133      jQuery('.fotorama').data('fotorama').setOptions({
134        autoplay: jQuery('.fotorama').data('fotorama').options['autoplay'] * 1.4
135      });
136    }
137    if(e.which == 45) {
138      jQuery('.fotorama').data('fotorama').setOptions({
139        autoplay: jQuery('.fotorama').data('fotorama').options['autoplay'] / 1.4
140      });
141    }
142  });
143  {/if}
144{/footer_script}
Note: See TracBrowser for help on using the repository browser.