Log in

View Full Version : Ultimate fadein Slideshow - Read slides from directory and build array dynamically



gary.mcgill
02-24-2014, 12:28 PM
1) Script Title: Ultimate Fade-In Slideshow ver. 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I thought this might be something others would want... I wanted to have the script read the files from a directory and dynamically build the slideshow. This way all you have to do is add a new file (or delete a file) from the directory and it automatically updates into the web page. It uses a php call to get the files and echos them into the page before it is served to the client (I also use random ordering of the slides so it does not matter how the
the array is built). Just so you know, glob() will read the directory in alphabetical order. Here is the code:


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [876, 313], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [

<?php // Build imagearray by reading files from main_page_images directory
$x=0;
$file=array();
foreach (glob("main_page_images/*.*") as $filename) { // populate the array by reading directory contents
$file[$x++] = $filename; }
$len = count($file) - 1; // gets correct ending array number - needs to be one less since array starts at zero
for ($x = 0; $x <= $len - 1; $x++) { // echo all array elements except last one
echo "[\"".$file[$x]."\", \"\" , \"\"],\n"; }
echo "[\"".$file[$len]."\", \"\" , \"\"]\n"; // echo last array element witout trailing comma
?>

],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:true, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "",
Just change the name of the directory from "main_page_images" to the name of your directory and it should work (of course, in this
example the directory is a "relative" subdirectory off the directory were the web page exists. If yours is not, you will need to change it to it's absolute path).
I hope someone finds this useful :)

jscheuer1
02-24-2014, 08:00 PM
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [213, 101], //width/height of gallery in pixels. Should reflect dimensions of largest image
<?php echo "\timagearray: [\n\t\t['" . implode("'],\n\t\t['", glob('main_page_images/*.*')) . "']\n\t],\n"; ?>
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

gary.mcgill
02-24-2014, 09:58 PM
Well, your way beyond me. I don't see how your code does not have a comma after the last line but somehow it is not there and it works perfectly. My hat is off to you! thank you very much. (you should probably delete my post).

jscheuer1
02-25-2014, 03:01 PM
I was just fooling around and came up with that from some other code I had played with before for this sort of thing. Your code is also good. It affords the opportunity to customize (to a degree and if desired) the description, link, and target fields.

The reason there's no comma after the last entry in the array is that I used implode (PHP's equivalent to javascript's join). When joining or imploding an array into a string, the string that's used to connect the pieces only goes in between them, never at the beginning or end. In my code, some things did need to be added at the very beginning and at the very end, but those are slightly different than the string ("'],\n\t\t['") that goes between each piece. At the very end I added ("']\n\t],\n"), which has a comma, but it's the comma that goes after the closing brace (]) of the entire array. No comma is added at the end (]) inside the array.

gary.mcgill
02-25-2014, 06:11 PM
Yes... I see how it works now. I had never used (or was even aware of) implode(). I see now how it would automatically not put a comma after the last element of the array. I also like your tabs that make everything look organized and readable. Thank you very much for your example. It helped me tremendously.