On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • 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!
    • Awsome! thank you lukemcd, right on time for a project.
      • Thank you for posting this!
        Been spending hours bashing my keys looking for a way to use Gallery really simply outside of its insanely complicated presets!
        • Thank you so much, just one question, the width 100% doesn't work. Is there any way to resize for smaller screens?

          Magzs