We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Looking for a very simple slideshow solution.

    • 39073
    • 15 Posts
    kahli Reply #1, 11 years, 6 months ago
    Afternoon, all,

    I'm searching for a very simple slideshow solution for an intranet site I have running. Ideally, I would like to be able to set up the slideshow so that it pulls images from a certain directory, and then a coworker could add or remove photos to that directory to edit what the slideshow displays. Interactivity isn't necessary: this slideshow will be displayed on a television, not intended for people to access from their computers. I just want it to cycle and show the images, and perhaps the image file name without the .jpg on the end.

    Does anyone know of anything I could add in to Revo to set this up?

    Cheers, Kahli

    This question has been answered by multiple community members. See the first response.

      • 4172
      • 5,888 Posts
      Bruno17 Reply #2, 11 years, 6 months ago
      something like this could do it:
      https://www.markhamstra.com/modx-blog/2012/04/managing-galleries-with-migx/

      perhaps in combination with this:
      http://rtfm.modx.com/display/ADDON/MIGX.Use+resource-specific+mediasource+and+multifile-uploader
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 3548
        • 102 Posts
        blankcheck Reply #3, 11 years, 6 months ago
        I have used this without any problems on numerous occasions:

        http://css-tricks.com/anythingslider-jquery-plugin/

        You can easily combine it with gallery plugin, getResources, custom code, whatever...
          Antonio Zdilar
          linearvector.com
        • boomerang Reply #4, 11 years, 6 months ago
          You could try http://rtfm.modx.com/display/ADDON/Slideshow+Manager which provides a nice nivo-slider effect
            Helen Warner
            Number one pixel!
            Proud to be linked with MODX at Crimson Pixel
            • 42082
            • 72 Posts
            modxnooby Reply #5, 11 years, 6 months ago

            Try FancyBox
            Not very simple but extremely good looking.
            • discuss.answer
              sottwell Reply #6, 11 years, 6 months ago
              If all you want to do is fetch from a specific file folder, you don't really need a full gallery extra. A snippet to read the folder and generate the list of images would be all you need. Choose a javascript slideshow that you like, and have the snippet generate the HTML that the slideshow uses. One that uses an unordered list would be the easiest to work with; the snippet would just need to loop through the files in the folder and load the filename into a list item.

              There is a snippet already existing to do this in the MODx Extras.
              http://modx.com/extras/package/photogalleryplus
              While this is for Evo, it would be very easy to modify to work in Revo as well.

              Aha! Found one for Revo
              http://modx.com/extras/package/filedir

              See also
              http://www.php.net/manual/en/function.readdir.php
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 32316
                • 387 Posts
                whistlemaker Reply #7, 11 years, 6 months ago
                If you know some coding you could create a simple snippet (php code) to grab all the images from a directory and put them into a page, a little css to hide all but one and a couple lines of jquery code to cycle through them (create the show). Would probably be as quick as figuring out some other prebuilt code, and would do exactly what you want.

                I have some code along these lines - I'll look for it.
                  • 32316
                  • 387 Posts
                  whistlemaker Reply #8, 11 years, 6 months ago
                  Here is a little proof of concept code I whipped up:

                  To go into a snippet (which I called SSS):
                  <?php
$modx->regClientCSS('assets/css/sss.css');
$modx->regClientStartupScript('//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
$modx->regClientStartupScript('assets/js/sss.js');

$files = scandir($imagedir);

$html = '<div id="slides">';
$class = 'show';
foreach ($files as $filename) {
    if(strstr($filename, '.jpg'))
    {
        $html .= '<img src="'.$imagedir.'/'.$filename.'" class="'.$class.'" alt=" " />';
        $class = '';
    }
} 

$html .= '</div>';

return $html;

                  This loads jQuery, and some css and javascript into the head of the page. It then creates a div and fills it with images it finds inside the image directory (specified in the call. And finally it gives the first image a class of show.
                  This code could be easily adapted to produce whatever html code needed for one of the countless slideshows out there - in this case I'm going to roll my own.

                  We add it to the content section of the page with:
                  [[SSS? &imagedir=`assets/images/ssstest`]]

                  The css file - sss.css - to achieve a crossfade the images must stacked on top of each other, I do this using absolute positioning of the images inside the slideshow div, the div gets some height and width properties so that the slideshow occupies some 'space' on the page, all the images are hidden, and then the image with a class of show is displayed:
                  #slides {
	position: relative;
	height: 180px;
	width: 260px;
	background-color: #bbb;
	border: 2px #4C4C4C solid;
	margin: 0 0 0 50px;
}

#slides img {
	display: none;
	position: absolute;
	margin: 15px 30px;
}

#slides img.show {
	display: block;
}

                  and the javascript:
                  $(document).ready(function() {
  slideShow();
});

function slideShow() {
  var current = $('#slides .show');
  var next = current.next().length ? current.next() : current.parent().children(':first');
  current.fadeOut(2000).removeClass('show');
  next.fadeIn(2000).addClass('show');
  setTimeout(slideShow, 6000);
}


                  The downside to doing it this way is that the images need to be all the same size, and the css has to adapted to that size - it is probably possible to get around this, BUT if you start adding too many features it is probably easier to go with a pre-rolled jQuery solution.
                  I call the snippet cached above - so you have to clear the cache after adding a jpg file in order for it to appear in the show, you could call it uncached to avoid this and for the OP's use this would probably be fine. [ed. note: whistlemaker last edited this post 11 years, 6 months ago.]
                  • discuss.answer
                    • 32316
                    • 387 Posts
                    whistlemaker Reply #9, 11 years, 6 months ago
                    to create unordered list of all the jpeg files in the specified directory:

                    $files = scandir($imagedir);
 
$html = '<ul id="slides">';

foreach ($files as $filename) {
    if(strstr($filename, '.jpg'))
    {
        $html .= '<li><img src="'.$imagedir.'/'.$filename.'" alt=" " /></li>';
    }
} 
 
$html .= '</ul>';
 
return $html;
                      • 39073
                      • 15 Posts
                      kahli Reply #10, 11 years, 6 months ago
                      Thank you everyone. I will have a bit of a play with the suggested solutions and let you all know how it goes.

                      :)