Image Sequence Script

A friend of mine was asking how to display the individual images that made up an animated GIF he had created. So, in the interests of showing off, I decided to write this step-by-step tutorial.

I guess there are a few ways this could be done (I would probably use some fancy tricks with Perl if I was doing it just for myself), but I'll use PHP and keep things simple.

If you want to see the actual code I used, take a look at the source code.

Let's assume that there are 5 sequential images that are used to compose an animated GIF, and that these images are numbered in order. Furthermore, since I'm borrowing graphics from http://www.vicsjavascripts.org.uk/StdImages/, I'll keep the original names of the images, and use an array to keep track of the names. This in fact makes my algorithm even simpler when I go to select which image is displayed.

By the way, we're echoing HTML via PHP as needed.

First, a simple listing of our images:

Now comes the good part: setting up our browseable list of images (you'll be directed off-site to the original graphics page... just hit your browser's "back" button to get back to this page):
Previous |

| Next

Neat. All we have left is to allow the user to select the images himself:

| Next

Note: This last iteration of our script includes a bit of code to sanitize the user-supplied data, to make sure that no cracker is trying to pull a fast one on us. All programmers (this includes you) should take the time to make sure their code is at least rudimentally secure.

--Joey Kelly
October 25, 2009