<![CDATA[ HOWTO: Simple Slideshow and Revo Gallery Component - My Forums]]> https://forums.modx.com/thread/?thread=50664 <![CDATA[Re: HOWTO: Simple Slideshow and Revo Gallery Component]]> https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-545307
Magzs]]> magzzs Sep 27, 2016, 12:01 PM https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-545307 <![CDATA[Re: HOWTO: Simple Slideshow and Revo Gallery Component]]> https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-434853 Been spending hours bashing my keys looking for a way to use Gallery really simply outside of its insanely complicated presets!]]> sheferd Aug 27, 2012, 04:38 PM https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-434853 <![CDATA[Re: HOWTO: Simple Slideshow and Revo Gallery Component]]> https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-296498 ]]> upiorz Apr 06, 2011, 07:27 PM https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-296498 <![CDATA[HOWTO: Simple Slideshow and Revo Gallery Component]]> https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-296497
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!]]> lukemcd Apr 05, 2011, 11:28 AM https://forums.modx.com/thread/50664/howto-simple-slideshow-and-revo-gallery-component#dis-post-296497