Hacks 1917 Industrial.. Strength Tips and Tools [Electronic resources] نسخه متنی

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
possibleotherwise, 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="/image/library/english/10062_view1.jpg";
view2.src="/image/library/english/10062_view2.jpg";
view3.src="/image/library/english/10062_view3.jpg";
view4.src="/image/library/english/10062_view4.jpg";
view5.src="/image/library/english/10062_view5.jpg";
view6.src="/image/library/english/10062_view6.jpg";
view7.src="/image/library/english/10062_view7.jpg";
view8.src="/image/library/english/10062_view8.jpg";     [2]
slider = new Image(20,20);     [3]
thumb = new Image(20,20);
slider.src="/image/library/english/10062_slider.gif";
thumb.src="/image/library/english/10062_thumb.gif";     [4]
function rotate(img) {
document.images['view'].src = "view" + img + ".src");     [5]
document.images[lastimg].src =      [6]
document.images[img].src =      [7]
lastimg = img);     [8]
}  
// --></script>
<table width=300 cellpadding=10 cellspacing=0 border=1>
<tr><td>
<img src="/image/library/english/10062_view1.jpg" width=300     [9] 
height=225 border=0 name="view">
</td></tr>
<tr><td align=center>
<nobr>
<img     [10]
src="/image/library/english/10062_slider.gif" width=20
height=20 name="1" onMouseOver="rotate('1');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="2" onMouseOver="rotate('2');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="3" onMouseOver="rotate('3');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="4" onMouseOver="rotate('4');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="5" onMouseOver="rotate('5');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="6" onMouseOver="rotate('6');"><img
src="/image/library/english/10062_slider.gif" width=20
height=20 name="7" onMouseOver="rotate('7');"><img
src="/image/library/english/10062_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="/image/library/english/10062_slider.gif" width=20
height=20 name="3" onMouseOver="rotate('3');">

to this:

<img src="/image/library/english/10062_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.