360 Degree Product View – another example

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: https://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.

Here is the new post: https://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

3 thoughts on “360 Degree Product View – another example

  1. I’m really inspired along with your writing talents as well as with the structure on your blog. Is this a paid subject matter or did you customize it yourself? Anyway keep up the nice quality writing, it’s uncommon to see a nice blog like this one today..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s