Hack21.Make a DHTML Slideshow
Hack 21. 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). 3.12.1. The CodeSave the code in Example 3-15 as index.php. Example 3-15. PHP script handling image display <?php $dh = new DirectoryIterator( "pics" ); $files = array(); foreach( $dh as $file ) { if ( preg_match( "/[.]jpg$/", $file ) ) $files []= "$file"; } ?> <html> <head> <title>Slideshow</title> <style> body { background: black; } #thumbnails { height: 140px; width: 100%; overflow: auto; } #pic { text-align: center; height: 400px; padding: 20px; } </style> <script> 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() { curimage++; if ( curimage >= image_list.length ) curimage = 0; switchimg( curimage ); } window.setInterval( "nextimage()", 2000 ); </script> </head> <body> <div > <table width="100%"> <tr> <?php $ind = 0; foreach( $files as $image ) { ?> <td width="160" nowrap align="center"> <a href="javascript:switchimg( <?php echo($ind); ?> )"> <img height="100" src="/books/1/201/1/html/2/scale.php?image=<?php echo($image); ?>&y=100" border="0" / > </a> </td> <?php $ind++; } ?> </tr> </table> </div> <div > <img height="400" src="/books/1/201/1/html/2/scale.php?image=<?php echo($files[0]); ?>&y=400" /> </div> </body> Now create scale.php, shown in Example 3-16, for handling image resizing. Example 3-16. 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 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. 3.12.2. Running the HackUpload 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 3-17. 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. Figure 3-17. A slideshow of my daughter at the pool
3.12.3. See Also
|
EAN: 2147483647
Pages: 163