Subscribe to get my new tutorials in your inbox.

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):

Link to the demo (View the source to get the code) :

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:

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:

  1. neti pot stainless steel

    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..

Write a Comment

Your email address will not be published. Required fields are marked *