360 degree car rotation – common code for mobiles and computer browsers

I had been updating my examples and tutorials off  lately and trying to create a more general approach to application development – Write a single app that runs in mobile browsers as well as computer browsers. Following the same approach, this time I am updating one of my previous tutorials – 360 Degree Car/Product rotation for iPhones. So, I worked on a 36o degree car rotation code that runs in both mobile and desktop browsers.

This tutorial is an update to my previous one, I also present a new demo. I will not go into the details, which I have talked about in my previous tutorial. Have a look at the demo, open it in either an iOS browser or a computer web-kit browser.

Link: http://jbk404.site50.net/360DegreeView/mobile/common.html

360 degree car rotation in mobile safari

What are the changes?

All the changes are in the javascript code. I have introduced a device detection mechanism and then automatically assign either touch events (for mobiles) or mouse events (for computer browsers). These are the same changes that I have recently talked of in my last post – Replicating the iPhone Swipe Gesture — common code for mobiles and computer browsers. That should help you out.

Other than that just try the example link in a computer web-kit browser – Chrome/Safari or an iOS device browser which is also a web-kit browser. Android devices need some changes and the same code might not work. I have talked on this in my previous post.

For the code, right click to view the source.

360 degree Car/Product view for mobile web – iPhone

I thought of writing this post due to increasing number of search queries that I found out on my site stats. A 360 degree product view for mobile web is important now as lot of manufacturers are starting to move towards mobile web apps for displaying their products.
In two of my earlier posts I have already talked about a 360 degree product view for desktop browsers with examples – post 1, post2. For the 360 degree to run on a mobile browser I had to make some adjustments – make the sprite much smaller in size, add touch gestures. The rest of the concept is same. So, in this post I will talk on how to make the 360 degree for iOS devices (iPhone,iPod and iPads).
I have already discussed about the core concept of changing the position of the background image (sprite image) with the movement of the mouse in my earlier posts. And how it detects the distance moved and the direction of movement and based on that the car is rotated. So I will not go into it once again. You can refer my earlier tutorial. I will just talk a little on the touch gestures and how to convert the already developed example (from my earlier post) so that now it listens to finger gestures on the mobile device.
Before moving further you deserve a demo, open the following link in your iOS device browser and drag your finger over the car.

Demo link: http://jbk404.site50.net/360DegreeView/mobile/

360 degree car rotation in mobile safari

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/

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

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