Simple Image Slideshow with jQuery and PHP

I really liked Jon Raasch’s jquery-powered slideshow, but integrating it into a page requires a bunch of steps:

1. Add the jQuery library
2. Add the slideshow javascript function
3. Add the CSS with opacity and z-layer set properly
4. Upload the images for the slideshow someplace
5. Enumerate the images’ URLs that you want to cycle through

Adding images is tedious (you have to upload AND update the image list), and there’s no clean support for multiple slideshows per page. I wanted a process that made integration into other pages trivial.

I decided that an IFRAME to host the slideshow would keep jQuery and the slideshow CSS partitioned away from the rest of the embedding page, and would let adding slideshows to new pages have an easy-to-follow recipe, no matter what was already going on in the existing page. The IFRAME needed the template HTML, and if I used PHP, I could generate the image list for the slideshow automatically from the images that live in the same directory as the PHP script.

So here are the new instructions, using this IFRAME approach:

1. Make a directory that will contain the images you want in the slideshow. For this example it’s “slideshow-demo“
2. Copy this file into the “slideshow-demo”  directory and name it index.php
3. Copy the images for the slideshow into the directory.
   Remember to resize all the images to the same dimensions.
4. On the page you want to embed the slideshow, add

   <iframe src ="slideshow-demo/" width="300" height="200"
     scrolling="no" frameborder="0"></iframe>

   Replace the width and height to be the common dimension of your images

Here’s a working demo:

Related posts:

1. Simple PHP image rotation script
   This blog has a rotating header — if you visit /header/ and bounce on reload, you’ll see a series of random images. Here’s how it works: The header is added......
2. How to Convert Your Book’s Images to Kindle
   Taking your painstakingly typeset book and shoving it through the kindle “conversion” meatgrinder was an exercise in wincing. Most of the images were corrupted, there was whitespace sprinkled randomly throughout......
3. Tips with iWork Pages
   If you’re writing a book, new chapters need to start on the top of the next right page. To do this in openoffice, you Insert > Break, choose “Page”, then......
4. Automatic panoramas with hugin and autopano
   I’ve only been using hugin for an hour now, and I’m really impressed. The mac binary doesn’t include the ability to automatically determine how images overlap, but it’s pretty easy......