sans-serif   serif

«

MooTools ThreeSixty Viewer Featuring the iPad

February 1, 2010

I thought Apple’s new 360 degree product viewer was flippin’ awesome. So I created a feature light version in mootools last night. I hope to add more (like throwing) and clean up the api a bit, but still, this is sweet.

As you can see in the source I created two classes. The first MouseWatcher is a sort of drag class that listens to the mouse position (clientX and clienY) after a mousedown event. I hope to extend this class to provide the “throwing” logic. Then in ThreeSixty I just extend MouseWatcher with a drag method, so on every mousemove the image src gets changed out.

Eventually this will make it into the forge, as soon as I get throwing to work, package it with some grabbing cursors and preload the images a bit more gracefully, of course.

Related Posts:

Comments

  • http://www.ubervu.com/conversations/ryanflorence.com/mootools-threesixty-viewer-featuring-the-ipad/ uberVU – social comments

    Social comments and analytics for this post…

    This post was mentioned on Twitter by ryanflorence: http://bit.ly/9MToQi – #MooTools ThreeSixty viewer featuring the iPad….

  • http://www.cbolson.com Chris Bolson

    Great Stuff Ryan! Makes me want an iPad even more (not that it is going to happen :( )

    On reading this post I was reminded of something similar I came across a few weeks ago: http://demo.rickyh.co.uk/rotate360/ A different approach to a similar concept but both done with Mootools :)

  • http://Garyhussey.com Gary Hussey

    Pretty slick business there. Thanks for sharing.

  • http://www.rickyh.co.uk RickyH

    I did something similar last year but i think yours seems smoother. When i built mine I found that having multiple images instead of one was slower. But in your example it seams fine. http://demo.rickyh.co.uk/rotate360/ for my example dude.

  • emehrkay

    This is pretty dope. How did you find that apple stores the images in this way? After looking at the image list I initially wondered why they didnt use a sprite, but I realized that there is no looping with a sprite.

    Cant wait to buy an iPad :( — 3g or not? I’m perplexed…

  • emehrkay

    After reading over the code a bit more I just want to say that you did a great job with this man.

    I cant wait until you release it. Now the issue is taking a good looking 360 panoramic.

  • Ryan Florence

    but I realized that there is no looping with a sprite.

    Sure there is!

    http://mootools.net/forge/p/spriteanimation

  • emehrkay

    Its me again..

    I tried to make it auto rotate, like on apple’s site — there has to be a better way right

    http://jsfiddle.net/EcLXU/

  • http://www.zcorrecteurs.fr Savageman

    I just tried it. The image is “flickering” when moving. I also tried RickyH version and it doesn’t have this drawback. I don’t know if it only happens to me, but a fix for this would definitely bring the animation to a next level.

  • http://wholesalekidssocksguides2009.webs.com kids’ socks wholesale

    nice advice and sharing,I will buy one nice Ipad for me .thanks,Joe

  • Sumanguj

    how do enable this for my website? the images are hidden away in apple’s website :(

  • http://mtness.net mtness

    to bad this thing doesn’t work on the ipad itself…

  • http://www.ibuypad.com ipad

    One more time, a very good article, thank you :)

blog comments powered by Disqus

Comments RSS