Make a DHTML Slideshow

Make a DHTML Slideshow

Use the PHP graphics library and DHTML to make a slideshow in your browser.

Family pictures are the classic icebreaker among parents. Who doesn't like to look at pictures of their own kids? (And who isn't bored silly looking at pictures of someone else's kids?) But isn't a set of wallet photos just passé in this modern wired world? How about an online slideshow?

This hack shows how to use a combination of PHP 5, the PHP image library, and some DHTML using JavaScript to create in your browser a slideshow of your favorite images (kids or otherwise).

The Code

Save the code in Figure as index.php.

PHP script handling image display
$dh = new DirectoryIterator( "pics" );

$files = array();
foreach( $dh as $file )
  if ( preg_match( "/[.]jpg$/", $file ) ) $files []= "$file";

body { background: black; }
#thumbnails { height: 140px; width: 100%; overflow: auto; }
#pic { text-align: center; height: 400px; padding: 20px; }
var image_list = [
<?php $first = true; foreach( $files as $image ) { ?>
<?php echo( $first ? "" : ", " ); ?>"<?php echo( $image ); ?>"
<?php $first = false; } ?>

var curimage = 0;

function switchimg( ind )
  var image = image_list[ind];
  var obj = document.getElementById( "selimg" );
  obj.src = "scale.php?image="+image+"&y=400";
  curimage = ind;

function nextimage()
  if ( curimage >= image_list.length ) curimage = 0;
  switchimg( curimage );

window.setInterval( "nextimage()", 2000 );
<div id="thumbnails">
<table width="100%">
<?php $ind = 0; foreach( $files as $image ) { ?>
<td width="160" nowrap align="center">
<a href="javascript:switchimg( <?php echo($ind); ?> )">
<img height="100" src="scale.php?image=<?php echo($image); ?>&y=100" border="0" /
<?php $ind++; } ?>
<div id="pic">
<img id="selimg" height="400" src="scale.php?image=<?php echo($files[0]);
	?>&y=400" />

Now create scale.php, shown in Figure, for handling image resizing.

Script using PHP's image-handling libraries for image scaling
$image = $_GET["image"];
$maxy = $_GET["y"];

$im = @imagecreatefromjpeg( "pics/".$image );
$curx = imagesx( $im );
$cury = imagesy( $im );
$ratio = $maxy / $cury;
$newx = $curx * $ratio;
$newy = $cury * $ratio;

$oim = imagecreatetruecolor( $newx, $newy );
imageantialias( $oim, true );
imagecopyresized( $oim, $im, 0, 0, 0, 0,
		$newx, $newy, $curx, $cury );

header( "content-type: image/jpeg" );
imagejpeg( $oim );

The JavaScript here is doing the real work. The switchimg( ) function changes the image by setting the src attribute of the <img> tag with the ID of selimg. And the nextimage( ) function is called whenever a two-second timer elapses (that timer is set with the window.setInterval( ) method).

The scale.php page is a handy little image-scaler page that you can use in a multitude of applications. If efficiency is your thing, you will probably want to have the scale.php page cache the scaled image so that it doesn't have to recompute the scaled image with every image hit. Alternately, you can use a command-line version of the scale.php script to create two scaled versions of each image, and upload the static images to the server. That way, you will never be scaling images on the fly.

Running the Hack

Upload the two PHP scripts into a directory on your web server, create a subdirectory called pics, and upload some of your favorite JPEG images. Then surf to the index.php page with your web browser. You should see something like Figure.

Every two seconds the image will change on its own, moving to the next image; or you can click on one of the images at the top of the page to go to that particular image.

A slideshow of my daughter at the pool

OK, I admit that part of the reason I wrote this hack was to have some pictures of my kid in the book. Can you blame me? She's cute!

See Also

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows