File: templates/wggallery_gallery_blueimpgallery.tpl

<!-- Header -->
<{include file='db:wggallery_admin_header.tpl'}>

<style>
.blueimp-gallery > .description {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description {
  display: block;
}
</style>

<{if $slideshowtype == 'lightbox'}>
    <{if $images_nb > 0}>
        <div id="links">
            <{foreach item=image from=$images}>
                <a href="<{if $source == 'large'}><{$image.large}><{else}><{$image.medium}><{/if}>" title="<{$image.title}>" data-description="<{$image.desc}>">
                    <img src="<{if $source_preview == 'medium'}><{$image.medium}><{else}><{$image.thumb}><{/if}>" alt="<{$image.title}>"></a>
            <{/foreach}>
        </div>
    <{/if}>
    <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery  blueimp-gallery-controls">
        <div class="slides"></div>
        <{if $showTitle == 'true'}><h3 class="title"></h3><{/if}>
        <p class="description"></p>
        <a class="prev">?</a>
        <a class="next">?</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <{if $showThumbnails == 'true'}>
            <ol class="indicator">
                <{foreach name=image item=image from=$images}>
                    <li style="background-image: url('<{$image.thumb}>');" title="<{$image.title}>" data-index="<{$smarty.foreach.image.iteration}>"></li>
                <{/foreach}>
            </ol>
        <{/if}>
    </div>

    <script src="<{$wggallery_url}>/assets/gallerytypes/blueimpgallery/js/blueimp-gallery.js" type="text/javascript"></script>
    
    <script>
        document.getElementById('links').onclick = function (event) {
            event = event || window.event;
            var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = {
                    index: link,
                    startSlideshow: <{$slideshowAuto}>,
                    slideshowInterval: <{$slideshowSpeed}>,
                    transitionSpeed: <{$transitionDuration}>,
                    event: event
                },
                links = this.getElementsByTagName('a');
            blueimp.Gallery(links, options);
        };
        blueimp.Gallery(
            document.getElementById('links'),
            {
                onslide: function (index, slide) {
                    var text = this.list[index].getAttribute('data-description'),
                        node = this.container.find('.description');
                    node.empty();
                    if (text) {
                        node[0].appendChild(document.createTextNode(text));
                    }
                }
            }
        );
    </script>
<{/if}> 

<{if $slideshowtype == 'inline'}>

    <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
    <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel blueimp-gallery-display blueimp-gallery-playing">
        <div class="slides"></div>
        <{if $showTitle == 'true'}><h3 class="title"></h3><{/if}>
        <a class="prev">?</a>
        <a class="next">?</a>
        <a class="play-pause"></a>
        <{if $showThumbnails == 'true'}>
            <ol class="indicator">
                <{foreach name=image item=image from=$images}>
                    <li style="background-image: url('<{$image.thumb}>');" title="<{$image.title}>" data-index="<{$smarty.foreach.image.iteration}>"></li>
                <{/foreach}>
            </ol>
        <{/if}>
    </div>
    
    <{if $images_nb > 0}>
        <div id="links" class='hidden'>
            <{foreach item=image from=$images}>
                <a href="<{if $source == 'large'}><{$image.large}><{else}><{$image.medium}><{/if}>" title="<{$image.title}>"></a>
            <{/foreach}>
        </div>
    <{/if}>


    <script src="<{$wggallery_url}>/assets/gallerytypes/blueimpgallery/js/blueimp-gallery.js" type="text/javascript"></script>
    
    <script>
        blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery-carousel',
            controlsClass: 'blueimp-gallery-controls',
            carousel: true,
            hidePageScrollbars: false,
            disableScroll: false,
            startSlideshow: <{$slideshowAuto}>,
            slideshowInterval: <{$slideshowSpeed}>,
            transitionSpeed: <{$transitionDuration}>
        }
    );
    </script>
<{/if}> 
	
<div class="clear spacer"></div>

<{if $error}>
	<div class="errorMsg"><strong><{$error}></strong></div>
<{/if}> 

<!-- Footer -->
<{include file='db:wggallery_footer.tpl'}>