I needed to have a very simple slideshow on a recent site. The slideshow would be a block on the page that would rotate through the images from a Gallery album with a simple dissolve effect. The images would have any title and description information displayed underneath. No navigation, no grid of thumbnails. I know there is a way to set this up with the Gallerific plugin that comes with Gallery but it felt like it adds a lot of extra code for what I needed. I created my own using a minimal amount of jQuery code.
To make my simple slideshow I first created a chunk called "simple_slideshow_galItemThumb". This will hold each individual image:
<div class="gal-item">
<img src="[[+thumbnail]]" alt="[[+name]]" />
[[+name:notempty=`<h3>[[+name]]</h3>`]]
[[+description:notempty=`<p>[[+description]]</p>`]]
</div>
And then the HTML for my page contains this code:
<style type="text/css">
.simple_slideshow { position: relative; width: 280px; }
.simple_slideshow .gal-item { position: absolute; left: 0; top: 0; }
</style>
<div class="simple_slideshow">
[[!Gallery?
&album=`My Album`
&thumbTpl=`simple_slideshow_galItemThumb`
&thumbWidth=`280`
&thumbHeight=`280`
&useCss=`0`
]]
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>
$(function(){
$('.simple_slideshow div.gal-item:gt(0)').hide();
setInterval(function(){$('.simple_slideshow div.gal-item:first-child').fadeOut(1000).next('div.gal-item').fadeIn(1000).end().appendTo('.simple_slideshow');}, 3000);
});
</script>
You should remove the line that loads jQuery if you already have it elsewhere in your template. The slide transition lasts one second and the duration the slide is up is three seconds. This can be adjusted in the Javascript. Obviously there is a lot more that can be done with styles and jQuery effects but for this example I have tried to keep it simple.
Hope it helps!
