Slideshow images in chronological order

[Raine Willful]

1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I learned from Mr. Scheuer how to call slideshow images from a folder, but I was wondering if they could be arranged by the date on the file rather than alphabetical order. Preferably, they would show in order from newest to oldest. I'm a rank amateur at these, so please be gentle.

[jscheuer1]

We can probably do that. There are at least several ways to get the filenames though, and how we go about doing it would depend upon that. What method are you using?

[Raine Willful]

I've used imagearray: galleryarray to call the images, which currently places them in alphabetical order, and the server-side scripting is PHP. I hope that's what you meant.

[jscheuer1]

Well yes and I meant the exact code. And now that I'm thinking about it, is the PHP code on the page or is it a separate file?

The reasons I ask are I already have it worked out for PHP, so I wanted to know that part, that means the answer is yes, we can do this. But if I have the exact code I might be able to just tweak it for you rather than make you change over to something completely different and/or change where the code is located.

[Raine Willful]

The code is in a slideshow page in the root directory. The code as I have it on the page:

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript" src="slidepics.php"></script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "picshow",
	dimensions: [500, 500],
	imagearray: galleryarray(),
	sortby: ["file", "asc"],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false,
	fadeduration: 200,
	descreveal: "always",
	togglerid: "picshowtoggler"
})

</script>

It's called in the HTML like so:

		<div id="picshowtoggler" style="width: 900px; margin: 0">

<a href="#" class="prev" style="height: 50px; float: left; border: 0; margin: 220px 0 0 60px"><img src="altprev.png" style="border: 0" alt="Previous"/></a>

<a href="#" class="next" style="height: 50px; float: right; border: 0; margin: 220px 60px 0 0"><img src="altnext.png" style="border: 0" alt="Next" /></a>

	<div id="slideshowtoggler">

<a href="#" class="prev" style="height: 50px; float: left; border: 0; margin: 220px 0 0 60px"></a>

<a href="#" class="next" style="height: 50px; float: right; border: 0; margin: 220px 60px 0 0"></a>

<div id="picshow"></div><br />

And as you can see, it calls a separate PHP file called "slidepics" (also in the root directory), which looks like this:

<?php
Header("content-type: application/x-javascript");

function returnimages($dirname="./images/Slides/") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
                 echo 'galleryarray[' . $curimage .']=["' . $dirname . $file . '"];' . "\n";
                 $curimage++;
               }
       }

       closedir($handle);
   }
   return($files);
}

echo "var galleryarray=new Array();" . "\n";
returnimages();
?>

It calls all the images in the "Slides" folder of the "images" directory. Not sure if any of this is helpful, but if possible, a good tweaking would be best.

[jscheuer1]

I see several issues with that code. The only one that I'm like 99% certain would cause an error (galleryarray is not a function, or something like that) is here:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "picshow",
	dimensions: [500, 500],
	imagearray: galleryarray(),
	sortby: ["file", "asc"],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false,
	fadeduration: 200,
	descreveal: "always",
	togglerid: "picshowtoggler"
})

</script>

Those red parentheses should not be there.

So fix that and use this PHP file in place of your current slidepics.php file:

<?php
Header("content-type: application/x-javascript");
function returnimages(){
    $photovar = isset($_GET['var'])? $_GET['var'] : 'galleryarray';
    if (!preg_match('#^[a-z_][a-z0-9_]+$#i', $photovar)){
        echo 'alert("var name must be at least two characters and contain only letters, numbers, or underscore, and cannot start with a number")';
        die();
    }
    $dirname = './images/Slides/';
    $odir = getcwd();
    chdir($dirname);
    $path = str_replace(' ', '%20', str_replace($_SERVER['DOCUMENT_ROOT'], '', str_replace('\\', '/', getcwd())));
    $base = 'http://' . preg_replace('#/{2,}#', '/', "{$_SERVER["SERVER_NAME"]}/$path/");
    $dirname = '.';
    $pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
    $files = array();
    if($handle = opendir($dirname)){
        clearstatcache();
        while(false !== ($file = readdir($handle))){
            if(preg_match($pattern, $file)){
                $files[$file] = filemtime($file);
            }
        }
        closedir($handle);
    }
    chdir($odir);
    arsort($files, SORT_NUMERIC);
    $files = array_keys($files);
    return "var $photovar = [\n    ['$base" . implode("'],\n    ['$base", $files) . "']\n];";
}

echo returnimages();
die();
?>

[Raine Willful]

Thanks, John. The first time I tried it, however, the photos from images/Slides didn't load; the slideshow was there, but without any images. I ran into this problem reloading the original code, too, and fixed it by uploading a code template I saved and plugging in the values for what I wanted to call. Therefore, it must be a problem on my end. I'll try this again and post back with the results.

[Raine Willful]

Quick update: I tried the code as written a second time and got the same error - the slideshow container shows up, as do the navigational arrows, but no images are loaded. The counter also doesn't show until I click one of the arrows. I even renamed all the images to make sure they didn't have any illegal characters, but no go. I copied and pasted the code into the new slidepics.php, but I'm clueless as to what's wrong. Sorry about all this.

[jscheuer1]

Please post a link to a page on your site that contains the problematic code so we can check it out.