Sinister Labs Freeware - PHP/JavaScript Slideshow Presenter

The purpose of this code is to easily display a large number of images by rotating through them, one at a time. The script must be installed into a .php page, or your server must be set up to process PHP code within the file extension you wish to use. The PHP script outputs a combination of HTML and JavaScript and provides easy access to several vaiables that can be used to change the presentation of the slideshow. Options allow you to change:

a title for the overall set of slideshows,

the size the images are displayed (images retain their original aspect ratio),

whether or not to show the slideshow selector list,

whether or not to show the random checkbox,

whether or not to show a control that changes the speed of the show,

the color of the background behind the show, and

the size of the border around the slideshow.

the position of the controls (above or below the slideshows).

Copy your .JPG, .JPEG or .GIF images into one or more directories on your web server. Think of each directory of images as a slideshow. Copy the code into your web page, then set up the code to include the directories you've created and set up the various options. If you have set up the options to display the controls, viewers of your page may select which slideshow to watch, whether the image files are presented sequentially or randomly and the delay time between picture.

Here's an example of this code in action


<?php
/*
 Utility for looping through images, aka slideshow...by Chuck Shultz, Sinister Labs

 The PHP script will execute on the server, building JavaScript code that will loop through the files in the directory you point to.
 If you point to more than one folder, the page will include a drop-down list, allowing the user to select the directory from which to play the slideshow.
 A random box allows you to select whether the pictures are displayed in order, or randmoly.

Directions:
 Create the web page with an extension of ".php".
 Include this file in the position within your web page where you want your rotator.
 Modify a few variables near the top of this file.

 Update the two arrays:
 	$arrDirectories holds the list of relative addresses of each direcory containing the pictures you want to rotate through.
 	$arrLabels holds the text for the options displayed to the user.
 There is a one-to-one correspondence between the directories and labels, so make sure you define the same number of each.

 If you specify more than one directory/label combination and set the variable $show_picklist, the page will include a drop-down box
 allowing  you to select which slideshow to present. Selecting a new slideshow causes the pictures to come from a different directory.
 
 If you include an "all" option, this will give you a selection that contains the photos from all of the other directories in the list.


 Define the following variables and arrays:
 	- $title is text that will be displayed above the options, if any. If $title is blank, no title is displayed.
 	
 	- $show_label_on_all is a string that can be set to blank ("") or a 2-character code. The firt character must be either a 't' for "top" or 'b' for "bottom".
 	The second character must be either 'l', 'c' or 'r', for "left", "center" or "right". This defines the position of the text label that will be displayed
 	when the selected slideshow is "All".
 
 	- $pic_height and $pic_width represent the maximum size the image will be displayed. The images will retain their original aspect ratio.
	If either the image height or width is set to zero or less than zero, then the image is displayed in the size defined by the image file.
	
	- Set $show_picklist to true to allow the display of a drop-down pick list. Each element corresponds to a slideshow.

	- Set $show_random to true to display the Random option checkbox. Set it false so it will not display.
	
	- Set $default_random to "true" and the random checkbox will be checked the first time the page is entered. Make sure to keep the double quotes around
	the value, unlike for most other options.

	- Set $show_delay to true if you would like to give the viewer the option to change the delay time between pictures.
		
	- Set $delay to the length of time to stay on each image, where 1000 = 1 second. If #show_delay is set to true, the user will be able to change
	the length of time spent on each image.

	- Set $option_location to either "above" or "below". This defines where the controls listed above will be displayed.

	- $arrDirectories - An array containing names of directories that hold the pictures you want to display. Each directory corresponds to
		a slideshow. If you define more than one directory/slideshow and $show_picklist is set to true, a pick list will appear on the page.
	Selecting an item on the pick list selects a different directory, which changes the pictures that are displayed on the rotator.
	If you only define only one directory or if $show_picklist is set to false, then the pick list does not display.
	When coming to the page for the first time, the first slideshhow on the list is selected and played.
	A directory of "All" (case insensitve) gives a slideshow containing the pictures from all of the other slideshows. (To realy show a
		slideshow from a directory call "All", mark it as "./All".
	
	- $arrLabels - An array of labels you want to be displayed on the pick list. For example, if the first item in the $arrDirectories list
		is the directory called "cars", you might make the first label "My Favorite Cars".
	You always want to have the same number of entries in the two arrays, or unexpected results will happen.

	- $bg_color - Color of the table background, use HTML format:
		#000000	= Black,
		#0000FF = Dark Blue,
		#00FFFF = LightBlue,
		#FFFFFF = White,
		#FFFF00 = Yellow,
		#FF0000 = Red,
		#00FF00 = Green,
		#FF00FF = Purple
	It's possible to use the right-side notation, but you'd run into problems with certain browsers.
	
	- $cellpadding - Space around the slideshow picture and options, affects how much room the $bg_color takes up.
	
	- $border - Size of border around the slideshow picture and options. Use zero ("0") for no border.
	
	An interesting example:
	Set the first item on the pick list labels to "All".
	Set several other directories in the $arrDirectory array.
	Set $show_random and $show_picklist to false.
	Set $default_random to true.
	Doing all of this gives one big random slideshow, containing pictures from all of the directories in your list.

*/
	$title = "TITLE";
	$show_label_on_all = "tl";
	$pic_height = 385;
	$pic_width = 515;
	$show_picklist = true;
	$show_random = false;
	$default_random = "true";	// Keep the double-quotes on this one!
	$show_delay = true;
	$delay = 3000;
	$option_location = "below";	// "above" or "below"
	$bg_color = "#FF00FF";
	$cellpadding = 30;
	$border = 0;

	$arrDirectories = array(
		"All",
		"directory 1",
		"directory 2",
		"directory 3",
		"directory 4"
	);

	$arrLabels = array(
		"All Events",
		"Label 1",
		"Label 2",
		"Label 3",
		"Label 4"
	);
/*
                 END OF SECTION 1
         
 Unless  you are modifying this script, you should not need to muck with anything below this.
*/
	$arrLabelsForEachPicture = array();

/*
 Some numbers needed if we are scaling the pictures
*/
	$blnUsePicSize = "false";
	if ( ($pic_height <= 0) || ($pic_width <= 0) )	{
		$blnUsePicSize = "true";
	} else {
		$window_ar = $pic_height / $pic_width;
		$arrHeight = array();
		$arrWidth = array();
	}
	echo '<FORM action="' . $_SERVER['PHP__SELF'] . '" method="post">';
/*
 How many selections might be in the pick list?
*/
 	$mycount = 0;
	foreach ($arrDirectories as $value)	{
		if ( strtolower($value) != "all" )	{
			$mycount++;
		}
	}
/*
 Did I call myself?
*/
	if ( $_SERVER['PHP_SELF'] == substr($_SERVER['HTTP_REFERER'], strlen($_SERVER['HTTP_REFERER']) - strlen($_SERVER['PHP_SELF']), 
		strlen($_SERVER['PHP_SELF'])) )	{	// Did I call me?
		
		$blnCallMyself = 1;
	} else {
		$blnCallMyself = 0;
	}

	echo "<CENTER>\n";
	echo "<TABLE ";
	if ( $border > 0 )	echo " BORDER=" . $border;
	echo " WIDTH=" . ($pic_width + 2 * $cellpadding) . " CELLPADDING=" . $cellpadding . ">\n";
	echo "<TR>\n";
	echo "<TD BGCOLOR=" . $bg_color . " ALIGN=center VALIGN=middle>\n";
	echo "<CENTER>\n";

	if ($show_picklist && ($option_location == "above") )	{
		show_options($title, $mycount, $arrDirectories, $arrLabels, $show_picklist, $show_random, $default_random, $show_delay, $delay, $blnCallMyself);
	}
/*
  Now, on to the JavaScript
*/
	echo "<script type=\"text/javascript\">\n";
/*
	If we're using the picture's actual size, then create the images in the array with zero size.
*/
	if ( $blnUsePicSize == "true" )	{
		echo "var pic_width=0;\n";
		echo "var pic_height=0;\n";
	}
?>

<!--
if (document.images)
{
<?php
	if ( !isset($_POST['cmbPickTopic']) )	{
		$image_dir = $arrDirectories[0];
	} else {
		$image_dir = $_POST['cmbPickTopic'];		// Let's make this one a function of what pick list element is selected.
	}

	$n = 0;											// File counter
	if ( strtolower($image_dir) == "all" )	{
		$index = 0;
		foreach ($arrDirectories as $img_dir)	{
			if ( strtolower($img_dir) != "all" )	{
//	echo 'img_dir=' . $image_dir . "\n";
	
				funWritePicLine1( $img_dir, $blnUsePicSize, $pic_height, $pic_width, $n, $arrWidth, $arrHeight, $arrLabels[$index], $arrLabelsForEachPicture );
			}
			$index++;
		}
	} else {
		funWritePicLine1( $image_dir, $blnUsePicSize, $pic_height, $pic_width, $n, $arrWidth, $arrHeight, "", $arrLabelsForEachPicture );
	}
	echo "\n\n";

	if ( ( ($blnCallMyself == 0) && ($default_random == "true") ) || 
		( ($blnCallMyself == 1) && ( ($show_random && ($_POST['isRandom'] == "on")) || (!$show_random && ($default_random == "true")) ) )  )	{
		
		srand( ((int)((double)microtime()*1000003)) );
		$start_index = rand(0, $n-1);
	} else {
		$start_index = 0;
	}
		
	echo "var pics= new Array(" . $n .");";
	echo "	var width= new Array(" . $n .");";
	echo "	var height= new Array(" . $n .");";
	echo "	var label= new Array(" . $n . ");";
	echo "\n";

	for($i = 0; $i < $n; $i++)	{
		echo '    pics[' . $i . ']=pic' . $i . '.src;';
		if ( $blnUsePicSize == "false" )	{
			echo '	width[' . $i . ']=' . $arrWidth[$i] . ';';
			echo '	height[' . $i . ']=' . $arrHeight[$i] . ';';
			echo '	label[' . $i . ']="' . $arrLabelsForEachPicture[$i] . '";';
		}
		echo "\n";
	}
	echo "\n";
	echo "var numpics=" . $n . ";\n";
	echo "var delay=" . $delay . ";\n";
	echo "var image_index=" . $start_index . ";	// random\n";
/*
  If this page did not call itself, then just go by the value of $default_random.
  If this page did call itself, see if $show_random is set to true.
  		If $show_random is set to true, then use the value of $_POST[isRandom].
  		If $show_random is set to false, then use the value of $default_random.
  Set the index of the image initially displayed.
*/
// The image we'll continually update.
	echo "imgName=\"img1\";\n\n";
/*
	Where all the action is
*/
	if ( ($blnCallMyself && (strtolower($_POST['cmbPickTopic']) == "all"))  ||  (!$blnCallMyself && (strtolower($arrDirectories[0]) == "all")) )	{
		if ( ($show_label_on_all == "") || (strtolower(substr($show_label_on_all, 0, 1)) == "t") )	{
			put_label($show_label_on_all, $arrLabelsForEachPicture[$start_index]);
		}
	}

	if ( $blnUsePicSize == "true" )	{
?>
	document.write("<img src='"+pics[image_index]+"' border='0' name='img1' align='center'>\n");
<?php
	} else {
?>
   document.write("<img src='"+pics[image_index]+"' border='0' width='"+width[image_index]+"' height='"+height[image_index]+"' name='img1' align='center'>\n");
<?php
	}

	if ( ($blnCallMyself && (strtolower($_POST['cmbPickTopic']) == "all"))  ||  (!$blnCallMyself && (strtolower($arrDirectories[0]) == "all")) )	{
		if ( ($show_label_on_all != "") && (strtolower(substr($show_label_on_all, 0, 1)) == "b") )	{
			put_label($show_label_on_all, $arrLabels[$start_index]);
		}
	}
?>
	setTimeout('change_image()', delay);
}
/*
 Javascript fuctions
*/
function change_image()
{
	var randomnumber = Math.floor(Math.random() * numpics);
	var isIE = (window.navigator.userAgent.indexOf("MSIE") > 0);
	
	if  (  ( (document.getElementById('isRandom') != null) && document.getElementById('isRandom').checked )  ||
		( (document.getElementById('isRandom') == null) && <?php echo $default_random; ?> )  )	{
		
		image_index += randomnumber;
		if (image_index >= numpics)
			image_index -= numpics;
	} else {
		image_index += 1;
		if (image_index >= numpics)
			image_index = 0;
	}

	document[imgName].src = pics[image_index];
	document[imgName].width = width[image_index];
	document[imgName].height = height[image_index];
	if ( document.getElementById('label') != null )	{
		document.getElementById('label').innerText = label[image_index];
	}

	if (document.getElementById('delay_time') == undefined) 
	{ 
		setTimeout('change_image()', delay);
	} else {
		setTimeout('change_image()', document.getElementById('delay_time').value * 1000);
	}
}

function update_delay_time(direction)
{
	var input = document.getElementById('delay_time').value;
	
	if ( direction == 'inc' )	{
		if ( input >= 99 )	{
			document.getElementById('delay_time').value = "99";
		} else if ( input >= 10 )	{
			input = parseFloat(input) + 1;
			document.getElementById('delay_time').value = input.toFixed(0);
		} else {
			input = parseFloat(input) + 0.1;
			if ( input >= 10 )	{
				document.getElementById('delay_time').value = input.toFixed(0);
			} else {
				document.getElementById('delay_time').value = input.toFixed(1);
			}
		}
	} else {
		if ( input < 1.1 )	{
			document.getElementById('delay_time').value = "1.0";
		} else if ( input <= 10 )	{
			input = parseFloat(input) - 0.1;
			document.getElementById('delay_time').value = input.toFixed(1);
		} else {
			input = parseFloat(input) - 1;
			document.getElementById('delay_time').value = input.toFixed(0);
		}
	}	
}

function validate_time_delay()
{
	var input = document.getElementById('delay_time').value;

	if ( isNaN(input) )	{
		document.getElementById('delay_time').value = "3.0";
		alert("Invalid delay time entered, must be a number.");
	}

	
	if ( input > 99 )	{
		document.getElementById('delay_time').value = "99";
		alert("Invalid delay time entered, must be a number less than 100.");
	}

	if ( input < 1 )	{
		document.getElementById('delay_time').value = "1.0";
		alert("Invalid delay time entered, must be a number no less than 1.0.");
	}

	if ( input >= 10 )	{
		document.getElementById('delay_time').value = parseFloat(input).toFixed(0);
	} else {
		document.getElementById('delay_time').value = parseFloat(input).toFixed(1);
	}
}

//-->
</script>

<?php
	if ($show_picklist && ($option_location != "above") )	{
		show_options($title, $mycount, $arrDirectories, $arrLabels, $show_picklist, $show_random, $default_random, $show_delay, $delay, $blnCallMyself);
	}
?>

</TD>
</TR>
</TABLE>
</FORM>

<?php
/*
 PHP functions
*/
function show_options($title, $mycount, $arrDirectories, $arrLabels, $show_picklist, $show_random, $default_random, $show_delay, $delay, $blnCallMyself)	{
/*
 Only show the title if it has something in it
*/
	if ( $title != "" )	{
		echo "<H1>" . $title . "</H1>\n";
		echo "<BR>\n";
	}
/*
Only show the pick list of slideshows if it is needed.
*/
	if ( ($mycount > 1) && $show_picklist )	{	
	 	echo '<FONT FACE="Arial">Pick a Topic: ';
		echo '<SELECT NAME="cmbPickTopic" OnChange="submit();">';
	
	 	$mycount = 0;
		foreach ($arrDirectories as $value)	{
			echo '<OPTION VALUE="' . $arrDirectories[$mycount] . '" ';
			if ( $_POST['cmbPickTopic'] == $arrDirectories[$mycount] )	{
				echo "SELECTED ";
			}
			echo '>' . $arrLabels[$mycount] . '</OPTION>';
			$mycount++;
		}
		echo "	</SELECT>\n";
		echo "<BR>\n";
		echo "<BR>\n";
	}
/*
Only show the Random option if it is needed.
*/
	if ( $show_random == true )	{
		echo "<INPUT TYPE=checkbox ";
		if ( $blnCallMyself )	{	// Did I call me?
			if ( $_POST["isRandom"] == "on" )	{
				echo " checked ";
			}
		} else {
			if ( $default_random == "true" )	{
				echo " CHECKED ";
			}
		}
		echo " NAME=isRandom ID=isRandom VALUE=\"on\" > Shuffle the Pictures?\n";
		echo "<BR>\n";
		echo "<BR>\n";
	}
/*
 Only display the the control to adjust the delay if needed.
*/
	if ( $delay < 1000 )	{		// Less than 1 second
		$delay_time = "1.0";
	} elseif ( $delay < 10000 )	{	// Less than 10 seconds
		$delay_time = number_format($delay/1000, 1);
	} elseif ( $delay < 100000 )	{	// Less than 100 seconds
		$delay_time = number_format($delay/1000, 0);
	} else {							// 100 seconds or more
		$delay_time = 100;
	}
	if ( $show_delay == true )	{
/*
 The spinner is inspired by stuff found at <a href="http://www.webcodingtech.com/javascript/spinner.php">www.webcodingtech.com</a>.
*/
		echo "<table cellpadding=0 cellspacing=0 border=0>\n";
		echo "<tr>\n";
		echo "<td rowspan=2>Delay Time between Pictures: </td>\n";
		echo "<td rowspan=2><input MAXSIZE=3 WIDTH=3 type=text name=delay_time ID=delay_time value=" . $delay_time . " ONCHANGE='validate_time_delay();' style=\"width:50px;height:23px;font-weight:bold;text-align:center;vertical-align:middle;\" /></td>\n";
		echo "<td><input type=button value=\" /\\ \" onclick=\"update_delay_time('inc');\" style=\"font-size:7px;margin:0;padding:0;width:20px;height:13px;\" ></td>\n";
		echo "<td rowspan=2> seconds</td>\n";
		echo "</tr>\n";
		echo "<tr>\n";
		echo "<td><input type=button value=\" \\/ \" onclick=\"update_delay_time('dec');\" style=\"font-size:7px;margin:0;padding:0;width:20px;height:12px;\" ></td>\n";
		echo "</tr>";
		echo "</table>\n";
		echo "<BR>\n";
		echo "<BR>\n";
	} else {			// Don't show the delay box, but still put up an invisible one
		echo "<input type=hidden name=delay_time value=" . $delay_time . " />\n";
	}
}

function funWritePicLine1( $directory, $blnUsePicSize, $pic_height, $pic_width, &$n, &$arrWidth, &$arrHeight, $label, &$arrLabelsForEachPicture )
{
	if ($directory == "" )	$directory = ".";
	$image_handle = opendir(getcwd() . "/" . $directory);
	while (false !== ($filename = readdir($image_handle)))	{
		$image_files[] = $filename;
	}

	sort($image_files);

	foreach ( $image_files as $image_file )	{
		$arrLabelsForEachPicture[$n] = $label;

		if ( ($image_file != ".") && ($image_file != "..") )	{
			if ( strpos(strtolower($image_file), '.gif', 1) || strpos(strtolower($image_file), '.jpg', 1) || strpos(strtolower($image_file), '.jpeg', 1) ) {
				if ( $blnUsePicSize == "false" )	{
// Get the dimensions of the image within the file.	
					list($image_width, $image_height) = getimagesize($directory . "/" . $image_file);

					$ratioh = $pic_height/$image_height; 
					$ratiow = $pic_width/$image_width; 
					$ratio = min($ratioh, $ratiow);
// New dimensions 
					$arrWidth[$n] = intval($ratio * $image_width); 
					$arrHeight[$n] = intval($ratio * $image_height); 
					echo "     pic" . $n . "= new Image(" . $arrWidth[$n] . ", " . $arrHeight[$n] . ");";
							
				} else {
					echo "     pic" . $n . "= new Image(0, 0);";
				}

				echo '     pic' . $n . '.src="' . $directory . "/" . $image_file . '";';
				
				echo "\n";
				$n++;
			}
		}
	}
}

function put_label($location, $strLabel)
{
	if ($location != "")
		$strPosition = strtolower( substr($location, 1, 1) );
	switch ($strPosition) {
		case "":
			echo "document.write(\"<DIV NAME=label ID=label ALIGN=right style='display: none;'>" . $strLabel . "</DIV>\\n\");\n";
			break;
			
		case "l":
			echo "document.write(\"<DIV NAME=label ID=label ALIGN=right style='font-style: italic;'>" . $strLabel . "</DIV>\\n\");\n";
			break;
			
		case "c":
			echo "document.write(\"<DIV NAME=label ID=label ALIGN=center style='font-style: italic;'>" . $strLabel . "</DIV>\\n\");\n";
			break;
			
		case "r":
			echo "document.write(\"<DIV NAME=label ID=label ALIGN=left style='font-style: italic;'>" . $strLabel . "</DIV>\\n\");\n";
			break;			
	}
}
/*
 End of Utility for looping through images, aka slideshow...by Chuck Shultz, Sinister Labs
*/
?>

So, did we really need to get fancy and use two different programming languages for this? Yes, we did and the reason is pretty straigtforward. JavaScript is just what we need to update the pictures every few seconds, creating the 'sllideshow' effect. However, JavaScript can't do things like 'list' the files within directories or get at each image's height and width After building many slideshows in the past where I typed in the name of every single file I'm using, I decided that it was time to start using PHP to do these kinds of tasks. In the process, we have a tool that's easy and flexible to use.