Dynamically populating a JavaScript image slideshow

A pesky problem with JavaScript slideshows it that you need to manually specify the images to display inside the script. If you have many images, this can quickly drive you up the wall. How about automating the process through PHP, by getting it to retrieve the file names of all images and passing it to your JavaScript slideshow to play around with?

Lets get straight to it, by creating a PHP script that gets the file names of all images inside the directory the script is placed in, and return them as a JavaScript array:

<?
//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=".") {
	$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);
	}
	return($files);
}

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

This script will grab the file names of every image in a directory (based on its extension) and output them as JavaScript array elements:

var galleryarray=new Array();
galleryarray[0]='dog.gif'
galleryarray[1]='cat.gif'
galleryarray[2]='person.gif'

where "dog.gif", "cat.gif" etc are the file names of the images inside the directory. Now that the tedious part is taken care of by PHP, we can go ahead and create a JavaScript slideshow script that uses this array to display all images inside the directory!

<script src="pics/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
	document.getElementById("slideshow").setAttribute("src", "pics/"+galleryarray[curimg])
	curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
	setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="pics/bear.gif" />
</div>

Example:

And there you have it! You can add or delete images to the "pics" directory, and the slideshow will automatically adapt accordingly. Nifty eh?

• Tutorial Introduction
• Dynamically populating a JavaScript image slideshow