Image Image Image Image Image
Scroll to Top

To Top

iPad

Apple’s 360 Rotating iPod HTML 5 Source Code Download

On 23, Aug 2011 | 26 Comments | In iPad, iPhone, Objective C, Programming, Website | By luke

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

Download Source Code

Oh and by the way it also works in Firefox! (Not sure about IE)


Comments

  1. Stefan

    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.

  2. How many photos are used in the sequence to make the rotation smooth?

  3. phil

    Yup, doesn’t seem to work in IE. really great example though

    • luke

      Yeah not surprised. I’ll try take a look at it when I get some time.

      • Morten Knudsen

        Hi
        Did you find any solution for the IE

      • Would like to know as well… :)

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

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

    • luke

      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.

  6. Edwin

    I want to use this for my commercial website. is it gonna cause legal issue??

    • luke

      Yeah I’m fairly sure thats fine.

      • Sekhar Roy

        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

        • luke

          You could try replacing the images inside the folder.

  7. eBON

    You rock, this is fantastic. Thank you!

  8. Ivan

    Could someone implement the inertia on mobile devices?

  9. landrvr1

    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

  10. Sanjak

    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?

    • We have face a same problem. LOL

  11. i have a 360 file, can i upload this to iWeb?? any suggestions

  12. Stampastock

    Many thanks

  13. Thankyou! You’re a life saver, I was struggling with this for literally hours.

  14. Still doesn’t work in IE. :-S

  15. somebody knows how can i remove the scroll?, has many empty blank space below 360 view.
    Thanks in advance.

  16. Huge

    Hi, I have paste new image to a folder. But nothing show up. Do i need to change any code? Any one please help. Thank you

    • luke

      You’ll need to paste multiple image and if you aren’t change any code you’ll need to make sure that the file names are the same as the old ones.

Submit a Comment