I recently required to do something similar to Apple's rotating iPod example in the safari HTML 5 showcase as seen in the link below (The page will redirect if your not using Safari)
http://www.apple.com/html5/showcase/threesixty/
There are links to the developer section were you can apparently download the sample code whilst the example code is good and shows some cool card flipping, and rotating 3D flips it wasn't exactly what I wanted.
So I've packaged it all up nicely for you I've even included the minimised javascript files, I used an awesome little app called Smaller which I highly recommend.
View Demo of the 360 rotating HTML example
Oh and by the way it also works in Firefox! (Not sure about IE)
By Stefan August 27, 2011 - 12:27 am
Hey.
That’s fantastic! Was just looking at this on apples website and couldn’t find a place to download it. Thanks. Saved me a lot of time.
By Daniel Budd September 4, 2011 - 12:46 pm
How many photos are used in the sequence to make the rotation smooth?
By phil November 16, 2011 - 4:23 pm
Yup, doesn’t seem to work in IE. really great example though
By luke November 18, 2011 - 2:04 pm
Yeah not surprised. I’ll try take a look at it when I get some time.
By Morten Knudsen October 4, 2012 - 3:54 am
Hi
Did you find any solution for the IE
By Dennis G. February 5, 2013 - 11:11 pm
Would like to know as well…
By Dan December 20, 2011 - 2:19 am
Hey, really great stuff, thanks for packaging this all up so neatly!
Got this to work straight off. However, when I imported the jQuery library (which the site where I was hoping to implement this script is running), it stopped the functionality. Even tested using strictly these source files, when mixed with jQuery (tested 1.6.2 and 1.7.1), had stopped working completely; nothing loads.
Any insight as to why it wouldn’t work with jQuery, or how to get it to work with jQuery??
Appreciate it!!
By luke December 20, 2011 - 8:40 am
The package uses scriptaculous and prototype framework so adding in jquery will cause conflicts
checkout http://api.jquery.com/jQuery.noConflict/ on how to resolve
By Stephen April 1, 2012 - 3:27 pm
This has been great! I’m using this code in iBook Author as a widget and works perfectly! Thanks!
One thing though… 180 deg? I looked through the vr.js to see what I could modify and found nothing. Any suggestions? Basically I don’t want it too loop back to image 1 from the last image.
Cheers.
By luke April 1, 2012 - 6:58 pm
You’d have to write some custom code for that.
I’d probably do something like.
Do a check if at image 1 and stop if we are swiping to the left don’t allow it and only allow right swipe.
If we are swiping right stop at the max number of images and only allow left swipe.
By Edwin April 12, 2012 - 12:44 pm
I want to use this for my commercial website. is it gonna cause legal issue??
By luke April 14, 2012 - 3:17 pm
Yeah I’m fairly sure thats fine.
By Sekhar Roy April 21, 2012 - 7:36 pm
Hi Luke,
I am a 3d artist, and often need to create 360 spin images. I usually output 36 to 72 frames for spin animations. How can i use the JS to get my rendered images work like the MAC example. I have very little knowledge on JS. I have been using shoogleit for some time.
but now the requirements are for apple compatibility and something that i doesn’t have the Shoogleit TAG on the art work.
Is this possible? Your help is highly appreicated since i am in the middle of the project.
thanks
By luke April 21, 2012 - 8:53 pm
You could try replacing the images inside the folder.
By eBON July 7, 2012 - 3:23 am
You rock, this is fantastic. Thank you!
By Ivan August 20, 2012 - 4:50 pm
Could someone implement the inertia on mobile devices?
By landrvr1 October 26, 2012 - 12:34 am
Hey, I’m coming into this a bit late but has anyone got some js code to start/stop and the first/last frame? More of a 180deg concept that’s mentioned above?
Tnx
By Sanjak November 22, 2012 - 7:04 am
Can someone tell me how I could customize this? Ie:
Put my own photos in (I guess just replace the ones in the photos folder, but what if I wanted to use a different size image or less images?)
What would I have to change and in what folder?
I’m so new at this and really only understand HTML and CSS… Can anyone help me?
By peter November 22, 2012 - 11:38 am
i have a 360 file, can i upload this to iWeb?? any suggestions
By Stampastock November 28, 2012 - 6:32 am
Many thanks
By Matt December 20, 2012 - 1:13 am
Thankyou! You’re a life saver, I was struggling with this for literally hours.
By Dennis G. February 5, 2013 - 11:17 pm
Still doesn’t work in IE. :-S
By Hector March 20, 2013 - 11:36 am
somebody knows how can i remove the scroll?, has many empty blank space below 360 view.
Thanks in advance.