Looking for a very simple slideshow solution.

15 Posts

kahli Reply #1, 13 years, 10 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.

5,888 Posts

Bruno17 Reply #2, 13 years, 10 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!

102 Posts

blankcheck Reply #3, 13 years, 10 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

☆ A M B ☆
350 Posts

boomerang Reply #4, 13 years, 10 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

72 Posts

modxnooby Reply #5, 13 years, 10 months ago

Try FancyBox
Not very simple but extremely good looking.

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 13 years, 10 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

387 Posts

whistlemaker Reply #7, 13 years, 10 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.

387 Posts

whistlemaker Reply #8, 13 years, 10 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 13 years, 10 months ago.]

discuss.answer

387 Posts

whistlemaker Reply #9, 13 years, 10 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;

15 Posts

kahli Reply #10, 13 years, 10 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.

:)

Answered Looking for a very simple slideshow solution.