JavaScript Slideshow

I’m using slideshow 2 (http://www.electricprism.com/aeron/slideshow/) to show a couple of pictures on my website, the problem is number of images and their locations should be hard coded into the javascript code.

i want to use an array (from a php file output) and somehow assign new values to the “var data” in the JavaScript so that all of my images in the folder will be shown without the need to manually update each time. any ideas?

This is my php code:

<?
//PHP SCRIPT: getimages.php
header('content-type: application/x-javascript');

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname="./images") {
     $pattern="(\\.jpg$)|(\\.png$)|(\\.jpeg$)|(\\.gif$)"; //valid image extensions
     $files = array();
     $curimage=0;
           if($handle = opendir($dirname)) {
                while(false !== ($file = readdir($handle))){
                     if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
                   echo 'galleryarray['.$curimage.']="'.$file .'";' . "\
";
             $curimage++;
                    }
            }

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

echo 'var galleryarray=new Array();' . "\
"; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?> 

And this is how my html file looks like:

<!doctype html>	
<html>
<head>
	<title>Slideshow 2!</title>
	<meta charset="utf-8">
	<meta name="author" content="[Aeron Glemann](http://www.electricprism.com/aeron/)">
	<link rel="stylesheet" href="css/slideshow.css">
	<style>
		.slideshow { float: left; margin: 50px; }
	</style>
	<script type="text/javascript" language="JavaScript" src="./code.php"></script>
	<script src="js/mootools-1.3.2-core.js"></script>
	<script src="js/mootools-1.3.2.1-more.js"></script>
	<script src="js/slideshow.js"></script>
	<script src="js/slideshow.flash.js"></script>
	<script src="js/slideshow.fold.js"></script>
	<script src="js/slideshow.kenburns.js"></script>
	<script src="js/slideshow.push.js"></script>
	<script>
		window.addEvent('domready', function(){
		
			
			var data = { '5.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }};

			new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
			
		});
	</script>
</head>
<body>
	<div id="overlap" class="slideshow">
		<img src="images/1.jpg">
	</div>
	
	
	</div>	
</body>
</html>