views:

48

answers:

3

I just browsed the apple iphone 4 gallery and stumbled upon the 360° view of the new iphone (see http://www.apple.com/iphone/gallery/, click on the 4th image from the left in the thumbnails view). First I thought it would be a flash movie which lets you rotate the iphone image, but as I inspected it with firebug I found out thats just plain html enhanced with javascript. The javascript changes the image src as I move the mouse. I browsed through the included javascript files but gave up quickly as they are all minified and not really readable.

So my question is: how do you do this in javascript? Is there a plugin for one of the popular javascript libraries that can accomplish a 360° view of a product just by using html, javascript and product photos taken from the various angles?

+3  A: 

Here we are : http://www.mathieusavard.info/threesixty/demo.html

Kaaviar
It looks like it was done with Scriptaculous on the Apple site, but same effect - very nice.
Skilldrick
I should have known that there is something for jquery. ;) Quite nice, although the apple version has a "smoother" feeling on it. Of course this is also because apple uses better prepared imagery.
Max
Sure, the Apple demo is with 180 images, that's why it looks so smooth
o15a3d4l11s2
+1  A: 

The script for the rotation is in vr.js, but it is complicated.

o15a3d4l11s2
More than complicated, it's compressed !
Kaaviar
+1  A: 

If you're looking for a pure-CSS technique that doesn't involve lots of images and works in IE7 and up, check out these examples:

Joeri Sebrechts