Load and Sort Images in a Slideshow from a folder

[idesign64]

1) Script Title:
Simple Controls Gallery

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

3) Describe problem:
I created a getpics.php file using the information on the previous forum post at http://www.dynamicdrive.com/forums/s...83&postcount=6 and integrated it into the slideshow script Simple Controls Gallery to have it load images from a folder on the server and create an array based upon those images.

Currently, the getpics.php file loads and presents images randomly and I need help modifying it so that images are sorted, placed into the array, and presented (in the slideshow) in alphanumeric order (e.g. img001.jpg, img002.jpg, img003.jpg, etc...). Is this possible?

This is the contents of the getpics.php file:

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

function returnimages($dirname="./images/") {
   $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();
?>

I appreciate any assistance with this.

[jscheuer1]

It would need almost a complete rewrite. But you can sort the images via javascript quite easily. If you're using Simple Gallery and this getpics.php file, you probably have something like so (highlighted line):

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: galleryarray,
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

in place of the manually typed out imagearray. If so, all you need to do is add a javascript sort:

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: galleryarray.sort(),
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

[idesign64]

It works great - Thanks for the help!

[jerris77]

IS there a way that you would share the script you came up with that sorts the images for getpics.php? Been trying to implement all the things I've read on here and no go, just one simple thing for sorting webcam files so they end up in a nice row in the selection window by the date of the file. Right now it just grabs all the images at random and nothing is sorted in any manner. Much thanks - Jerris

[Beverleyh]

Are you using the Simple Controls Gallery script, as the person who originally started this thread is using?

If so, the solution has been provided - just add sort() to the image array as John indicates in his reply above.

If you are not using the Simple Controls Gallery script then please start a new thread for your question, clearly stating which script(s) you are using (you can refer back to this post with a link if you need to) with a description of your problem and a link to your web page.

Please refer to this thread for the correct posting format: http://www.dynamicdrive.com/forums/showthread.php?t=6]

[jscheuer1]

IS there a way that you would share the script you came up with that sorts the images for getpics.php? Been trying to implement all the things I've read on here and no go, just one simple thing for sorting webcam files so they end up in a nice row in the selection window by the date of the file. Right now it just grabs all the images at random and nothing is sorted in any manner. Much thanks - Jerris

.sort() needs no script. It's native to all browsers.

If you want more help, please start a new thread.