About

About ten years ago, I created a little effect that combined an image map and JavaScript image replacement to create something that could work like 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.)

All of this is done with the same technology: JavaScript image replacement combined with an image map. The JavaScript is very repetitive and the image map is math-based so the whole thing lends itself very nicely to be scripted with PHP. The whole thing takes about 50 lines.

Other people have done similar things with Flash--here's a five-page tutorial on how to do this with Flash--but this JavaScript solution is very nice for several reasons:

• you don't have to have QuickTime or Flash authoring tools
• you don't have to "build" anything, just throw the images into a folder along with the scripts and edit a few lines.
• visitors don't need QuickTime or Flash plugins for this to work (of course almost everyone has Flash and almost as many have QuickTime but there's always the question of which version as well. The JavaScript used here is about a decade old--this will work in Netscape 3, I think.)

Other pros and cons are listed below.

Code

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.

• view the source: example.php, skim.php
• download the source or a package with source files and sample images

Usage

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:

1. The images must be named 1.jpg, 2.jpg, 3.jpg, etc.
2. The number of images must divide evenly into the width of the thumbnails. For example, if your images are 320px wide, you can have 16 or 32 images, but not 12 or 24. If you get decimals, a) the code will be messy and b) Opera won't like it.

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.

Pros and Cons

• Pros
  • Free. Can't beat that!
  • Easy to author. All you need is the code and a series of images. Once you've got a series of images, you can literally create and deploy in a minute.
  • Doesn't require any plugins. Sure, almost everyone has Flash, and almost as many have QuickTime, and yes, there are a few people with JavaScript turned off, but overall, it's nice. You never know when someone will want to visit your site with a new machine that hasn't had everything installed yet. :-)
  • Easy for visitors to use. Just put a one-line instruction above the images: "Move your mouse over the image to see other angles." QuickTime is much more fully-featured--you can zoom in and out, you can create links within the image that take you to other views (i.e., if you were looking in a room, you could click on the door and then it would take you to that room) but all of these add complexity. Plus it isn't even as easy to use in the first place--you've got to click and drag to move around, as opposed to just moving the mouse over the image.
  • Felxible. You can easily adjust the code to work with large images only instead of the default small-links-to-large setup, and you can make the links lead anywhere--the full-size image, a page, whatever.
  • Expandable. It wouldn't take much code to make this work in two dimensions--in PHP, just put one loop inside another, like when you want to draw rows and columns from a database.
• Cons
  • Not as smooth as real QTVR. QTVR has some neat image stuff happening so you're not looking at one image after another, you're navigating around one long image.
  • This method can be "heavy"--i.e., large file sizes and long page load times. Basically what you're doing is drawing a bunch of images on the screen. The page will weigh in at (number of images) x (filesize of each image) so a page with twenty 25kb images will be half a megabyte. Not a huge deal these days, but something to be aware of. This QTVR panorama is 780k. My Sea World sample is 1.2 MB.

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. :-)