Hack 62 Show a 360-Degree View of Your Item

With a few photos of your item and a little JavaScript code, you can wow your customers with that showroom feel.

One of JavaScript's greatest strengths is its ability to manipulate images on a web page, allowing you to turn an otherwise static auction page into an interactive selling tool. In addition to being much cooler than eBay's built-in slide show feature, it's completely free and limited only by the amount of time you want to spend preparing your images.

5.9.1 Taking the Photos

The most challenging part of creating an interactive 360-degree view of your item is taking the photos, which really isn't all that difficult. The goal is to take photos of all sides of an item so that when they're viewed consecutively, like frames in a movie, it looks like the object is spinning. In most cases, you won't need more than four or five images. Having more frames will produce a smoother effect, but will take longer to load.

There are two basic approaches to taking the photos:

Stationary camera

To produce a "spinning" effect, simply mount your camera on a tripod and point it at your item. Take a photo, rotate the item 90 degrees, take another photo, rotate it again, and so on. For a smoother effect, place your item on a turntable or lazy susan, commonly available at hardware and houseware stores.

Stationary object

If you're photographing a large item, like a car or piece of furniture, or if you simply want that "walkaround" effect, then you can literally walk around your item and photograph it from each angle. For the best effect, use a tripod to keep the height and angle consistent, and use a ruler or measuring tape to maintain a consistent distance from the object.

Either way you do it, you'll want your photos to be as evenly spaced as possible. If you're taking only four frames, each photo should be 90 degrees apart (72 degrees for five frames, 60 degrees for six frames, 45 degrees for eight frames, and so on). Figure 5-11 shows four sides of an object photographed with a stationary camera.

Figure 5-11. Four sides of the object photographed with a stationary camera will give you a "spinning" effect

If you don't have a tripod, do your best to keep the angle, height, and distance from the object as consistent as possible?otherwise, your object will jump and the rotation will look sloppy. Also, don't mix portrait and landscape shots.

5.9.2 Preparing the Images

The more consistent your images are, the better the animation will look. For instance, the object you're photographing must appear to be the same size in each photo. If you used a tripod to take the photos, this will be a snap; otherwise, you may have to crop the photos to make them all proportional. The lighting should also be consistent; you can correct slight aberrations in exposure by using your image editor's Auto Levels tool (in Photoshop, go to Image Adjustments Auto Levels).

All your images must have the same pixel dimensions. To allow the animation to run smoothly, your images should be small so that they load quickly. Don't bother making them bigger than 400 pixels wide (for the larger dimension); 300 pixels is even better. See [Hack #60] for an easy way to resize a bunch of pictures.

When you're done, upload all the photos to your web server, as described in [Hack #59].

5.9.3 The Hack

Simply place this code in your auction description to include an interactive 360-degree view of your object:

<script language="JavaScript"><!--
var lastimg = "1";

view1 = new Image(300,225);     [1]
view2 = new Image(300,225);
view3 = new Image(300,225);
view4 = new Image(300,225);
view5 = new Image(300,225);
view6 = new Image(300,225);
view7 = new Image(300,225);
view8 = new Image(300,225);
view1.src="http://www.ebayhacks.com/pictures/view1.jpg";
view2.src="http://www.ebayhacks.com/pictures/view2.jpg";
view3.src="http://www.ebayhacks.com/pictures/view3.jpg";
view4.src="http://www.ebayhacks.com/pictures/view4.jpg";
view5.src="http://www.ebayhacks.com/pictures/view5.jpg";
view6.src="http://www.ebayhacks.com/pictures/view6.jpg";
view7.src="http://www.ebayhacks.com/pictures/view7.jpg";
view8.src="http://www.ebayhacks.com/pictures/view8.jpg";     [2]

slider = new Image(20,20);     [3]
thumb = new Image(20,20);
slider.src="http://www.ebayhacks.com/pictures/slider.gif";
thumb.src="http://www.ebayhacks.com/pictures/thumb.gif";     [4]

function rotate(img) {
  document.images['view'].src = eval("view" + img + ".src");     [5]
  document.images[lastimg].src = slider.src;     [6]
  document.images[img].src = thumb.src;     [7]
  lastimg = eval(img);     [8]
}  
// --></script>

<table width=300 cellpadding=10 cellspacing=0 border=1>
<tr><td>
  <img src="http://www.ebayhacks.com/pictures/view1.jpg" width=300     [9] 
height=225 border=0 name="view">
</td></tr>
<tr><td align=center>
  <nobr>
  <img     [10]
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="1" onMouseOver="rotate('1');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="2" onMouseOver="rotate('2');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="3" onMouseOver="rotate('3');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="4" onMouseOver="rotate('4');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="5" onMouseOver="rotate('5');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="6" onMouseOver="rotate('6');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="7" onMouseOver="rotate('7');"><img
    src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="8" onMouseOver="rotate('8');">
  </nobr><br>
    Move the slider to rotate the object
</td></tr>
</table>

Here's how it works. A table holds the first frame of the animation [9] and, beneath it, a series of images that make up the slider bar [10]. As the mouse is moved across each section of the slider bar, the JavaScript code replaces the image with the corresponding view of the object, as shown in Figure 5-12.

Figure 5-12. Move your mouse over the slider to flip between different views of your item

The bulk of the JavaScript code is simply used to preload the images: the eight frames in this example appear from line [1] to [2], followed by the two images used for the slider bar from line [3] to [4]. You'll want to replace the URLs in these lines with the addresses of your own images, and the dimensions with the dimensions of your frames. If you have fewer or more than eight frames, you'll need to remove or add lines accordingly, as well as change the number of slider bar segments on line [10].

The rotate( ) function is what does all the work. First, on line [5], a new photo is placed into the "view" image (so named on line [9]). The script knows which photo to use because of the img variable, passed to the function from the onMouseOver event in each slider bar section on line [10].

Further down, on line [7], the current section of the slider bar is "highlighted" by replacing the "empty" slider bar section image with a "full" slider image. Finally, the current position is recorded into the lastimg variable [8] so that the next time the function runs, it can make this section "empty" again, as it does on line [6].

5.9.4 Hacking the Hack

Ultimately, the photo album produced by this code is similar to the one in [Hack #61]. The only things that specifically make the image "rotate" are the collection of photos you use and the fact that the images are preloaded to make it responsive. If you want a photo album instead, but prefer the approach in this hack to the aforementioned photo album hack, you can simply replace the slider bar segments with thumbnails.

The sample code rotates the object as the mouse moves over the slider. If you prefer to have the slider move only when clicked, change the <img> tags (one for each slider bar segment) on line [10] from this:

<img src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="3" onMouseOver="rotate('3');">

to this:

<img src="http://www.ebayhacks.com/pictures/slider.gif" width=20
      height=20 name="3" onClick="rotate('3');">

To have the image rotate automatically, add this code immediately above line [1]:

setTimeout('autorotate(  )', 500);

function autorotate(  ) {
  img = lastimg + 1;
  if (img > 8) { img = 1; }
  rotate(img);
  setTimeout('autorotate(  )', 500);
}

where 500 is the number of milliseconds to wait between frames (signifying a half second). Specify 200 for a fifth of a second, 1000 for a full second, and so on.