About ten years ago, I created a little effect that combined an image map
a dropdown menu.
This was several years before CSS gave us a good way to do this. :-) Around that same time, I also first saw QTVR--QuickTime Virtual Reality. It's a technology from Apple that combines a series of images into a single movie object. But it's not a regular press-play-and-watch movie. Rather, you click and drag over the image and you can change your point of view--either to see left and right (and up and down) in a panorama, or to see an object from all sides. Here is the requisite Wikipedia page and here is a page at Apple with several panorama samples. Apple also uses 360° views of some of their products. Here is one for the iPod.
I quickly realized that I could use my old image map/rollover thing to create a similar effect that wouldn't require QuickTime to author or view. Here's one I built of a Mustang on a turntable at a dealership:
And here is a panorama I made from the Sky Tower ride at Sea World. (Excuse the blown-out color; these were made with stills from a video I shot.) And one more: I made this by starting with NASA's famous "earthlights" picture and running it through Photoshop's "spherize" filter.
Fast-forward a decade. Apple introduced the 'skim' view in iPhoto and the .Mac gallery (see an example gallery or watch the August 7 event) and I thought "Hey! My code could do that--just feed it a string of random images instead of a carefully shot sequence!"
There are many other things you could do with this technique. You could use pictures of book covers to create a virtual bookshelf, or you could create a virtual book. (OK, maybe it's not the best way to read, but if you want to show off a few pages of a magazine you're designing or something, it might be good.) If you want to easily arrange some images for a presentation, or even create something like PowerPoint slides that are easy to nagivate with a browser, this would work. You can also use a series of images from a webcam to create a time lapse/video scrubbing effect. You could even make a tutorial with a series of screenshots. If you felt like spending some time in Photoshop you could even create something like Apple's 'Cover Flow' effect. (Yes, I know they didn't invent it, but they own it.)
Other pros and cons are listed below.
The source contains two PHP files. 'main.php' is meant to be the front page of
a gallery. You'll see one skimmable icon each time you call 'skim.php'.
Note that this only creates skimmable thumbnails which lead to individual images. This is not set up currently to lead to a gallery page. That would be trivial to implement, but a) I wanted this first version to be as simple as possible and b) I wanted to get this out to the world as soon as possible. I've already got plans to fix that in addition to several other features, like making it automatically find all the folders in 'images', work with images with random names, make it round off the numbers if the number of images doesn't divide evenly into the width, etc.
Handy tip: If your server doesn't have PHP, you can install PHP on your own machine, run the script, and then save the HTML it generates.
The code assumes that this will be used in a 'skim' effect in a gallery and will show thumbnails
on the page that link to full-size versions of the image.
Files should be laid out like this:
~/public_html/main.php - creates the page with all the thumbnails
~/public_html/skim.php - generates the code that causes the thumbnails to be skimmable
~/public_html/images/ - holds folders. One folder per group of pics.
~/public_html/images/whatever/ - holds fullsize images.
~/public_html/images/whatever/thumbs/ - holds thumbnails.
(You can use different paths--just change them in main.php.)
Two important notes:
If you use this with a sequence of carefully-shot images, you'll get a QTVR effect. (QTVR tips: if you're shooting an object, spin it counterclockwise, or walk around it clockwise. If you're shooting a panorama, spin counterclockwise. If you're shooting an object, keep the background simeple, or silhouette it, to keep the sizes of the individual files down.) To get an iPhoto-like 'skim' effect, any random batch of images will do.
Feel free to email me with any comments, problems, or suggestions. If you modify this in any way I'd love to hear what improvements you've made. If you use it on your own gallery I'd love to see how it turned out, or at least hear from you "Yes, I did it, it worked!" if you don't want me to see the pics. And if you want to integrate this with Gallery then you'll save me a lot of work. :-)