Just completed another example of a 360 Degree product view, this time of a car. The images have been extracted from a .swf flash file and attached together to make a sprite image. Unlike the previous example in my last post, this time the sprite image is horizontal. In the previous example it was a vertical sprite image. So, I had to make small changes to the java script code so that each time the mouse is dragged either left or right the x-attribute of the backgroundPosition is changed, something like this,
document.getElementById("imageHolder").style.backgroundPosition = (-counter * 300) + "px 0px";
You can check out the demo and then the source. Rest of the things are same as my earlier post.
Here is the link to the sprite image (zoom in to see the actual size): http://jbk404.site50.net/360DegreeView/car/images/sprite.png
Link to the demo (View the source to get the code) : http://jbk404.site50.net/360DegreeView/car/
1) I have come up with a mobile web version of the 360 degree product view for iPhone and it is touch gesture enabled. You can find it here: http://jbkflex.wordpress.com/2012/02/17/360-degree-carproduct-view-for-mobile-web-iphone/
2) Based on my approach of creating a single application for mobiles and computer browsers – writing a common code for both type of devices, I have come up with an update to this post. The new example has script that automatically assigns touch events in mobiles and mouse events in computer browsers. So you do not have to hard code anything. The same code runs in mobiles as well as computer browsers.