[27034] | 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 | |
---|
[27201] | 4 | {literal} |
---|
| 5 | <script type="text/javascript"> |
---|
| 6 | var image_w = {/literal}{$item_height}{literal} |
---|
| 7 | var image_h = {/literal}{$item_height}{literal} |
---|
| 8 | </script> |
---|
| 9 | {/literal} |
---|
| 10 | |
---|
[27034] | 11 | <div id="slideshow"> |
---|
[27201] | 12 | <div id="imageHeaderBar"> |
---|
| 13 | <div class="browsePath"> |
---|
| 14 | {if isset($U_SLIDESHOW_STOP) } |
---|
[27034] | 15 | [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ] |
---|
[27201] | 16 | {/if} |
---|
| 17 | <h2 class="showtitle">{$current.TITLE}</h2> |
---|
[27034] | 18 | </div> |
---|
[27201] | 19 | </div> |
---|
[27034] | 20 | |
---|
[27201] | 21 | <div id="imageToolBar"> |
---|
| 22 | <div class="imageNumber">{$PHOTO}</div> |
---|
| 23 | </div> |
---|
[27034] | 24 | |
---|
[27201] | 25 | <div id="content"> |
---|
[27034] | 26 | <div id="theImage"> |
---|
[27155] | 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}" |
---|
[29383] | 29 | data-shadows="{if $Fotorama['shadows']}true{else}false{/if}" data-nav="{$Fotorama['nav']}" data-fit="{$Fotorama['fit']}" |
---|
[27155] | 30 | data-allowfullscreen="{$Fotorama['allowfullscreen']}" data-autoplay="{if $Fotorama['autoplay']}true{else}false{/if}" |
---|
[29383] | 31 | data-transition="{$Fotorama['transition']}" data-stopautoplayontouch="{if $Fotorama['stopautoplayontouch']}true{else}false{/if}" |
---|
| 32 | data-loop="{if $Fotorama['loop']}true{else}false{/if}"> |
---|
[27034] | 33 | {foreach from=$items item=thumbnail} |
---|
[27155] | 34 | <a href="{$thumbnail['derivative']->get_url()}" |
---|
[29384] | 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}> |
---|
[27342] | 36 | {if $Fotorama['nav'] == 'thumbs' || $Fotorama['fullscreen_nav'] == 'thumbs'}<img src="{$thumbnail['derivative_thumb']->get_url()}">{/if} |
---|
[27155] | 37 | </a> |
---|
[27034] | 38 | {/foreach} |
---|
| 39 | </div> |
---|
| 40 | </div> |
---|
[27201] | 41 | </div> |
---|
| 42 | </div> |
---|
[27039] | 43 | |
---|
[27201] | 44 | {footer_script require='jquery'}{literal} |
---|
| 45 | var fullscreen = false; |
---|
[27343] | 46 | jQuery().ready(function() { |
---|
[27201] | 47 | jQuery('.fotorama') |
---|
[27039] | 48 | // Listen to the events |
---|
| 49 | .on('fotorama:showend ', |
---|
| 50 | function (e, fotorama, extra) { |
---|
[27201] | 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}); |
---|
[29397] | 56 | document.title = fotorama.activeFrame['title'] + ' | {/literal}{$GALLERY_TITLE|@escape:javascript}{literal}'; |
---|
[27201] | 57 | } |
---|
| 58 | } |
---|
| 59 | ) |
---|
| 60 | .on('fotorama:fullscreenenter', |
---|
| 61 | function (e, fotorama, extra) { |
---|
[27342] | 62 | fotorama.setOptions({ |
---|
| 63 | nav: "{/literal}{$Fotorama['fullscreen_nav']}{literal}" |
---|
| 64 | }); |
---|
[27201] | 65 | fotorama.startAutoplay(); |
---|
[27342] | 66 | |
---|
| 67 | if (jQuery('.fotorama').attr('data-allowfullscreen') == 'native') |
---|
| 68 | fullscreen = true; |
---|
[27201] | 69 | } |
---|
| 70 | ) |
---|
| 71 | .on('fotorama:fullscreenexit', |
---|
| 72 | function (e, fotorama, extra) { |
---|
[27343] | 73 | {/literal}{if $Fotorama['only_fullscreen']}{literal} |
---|
| 74 | window.location.replace(fotorama.activeFrame['url']); |
---|
| 75 | {/literal}{else}{literal} |
---|
| 76 | |
---|
[27342] | 77 | fotorama.setOptions({ |
---|
| 78 | nav: "{/literal}{$Fotorama['nav']}{literal}" |
---|
| 79 | }); |
---|
[27201] | 80 | |
---|
[27039] | 81 | history.replaceState(null, null, fotorama.activeFrame['url']+'&slideshow='); |
---|
[27201] | 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}); |
---|
[29397] | 85 | document.title = fotorama.activeFrame['title'] + ' | {/literal}{$GALLERY_TITLE|@escape:javascript}{literal}'; |
---|
[27342] | 86 | |
---|
| 87 | fullscreen = false; |
---|
[27343] | 88 | {/literal}{/if}{literal} |
---|
[27039] | 89 | } |
---|
| 90 | ) |
---|
| 91 | // Initialize fotorama manually |
---|
| 92 | .fotorama(); |
---|
[27343] | 93 | |
---|
| 94 | {/literal}{if $Fotorama['only_fullscreen']}{literal} |
---|
| 95 | jQuery('.fotorama').data('fotorama').requestFullScreen(); |
---|
| 96 | {/literal}{/if}{literal} |
---|
[27039] | 97 | }); |
---|
[27201] | 98 | {/literal}{/footer_script} |
---|