April 28, 2011, 4:51 a.m.
posted by purezlo
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?
Save the code in Figure as index.php.
PHP script handling image display
Now create scale.php, shown in Figure, for handling image resizing.
Script using PHP's image-handling libraries for image scaling
<?php $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 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
"Create an Interactive Calendar" [Hack #25]
"Section Your Content with Spinners" [Hack #15]
"Create the Google Maps Scrolling Effect" [Hack #26]