Help 360 degrees view

[team1504]

Hello,
I was looking at some demos with things you can do with HTML5, CSS3, and JavaScript together. One of the nice websites I stumbled upon was html5rocks.com
and another was Apple's HTML5 Showcase

My problem lies with trying to recreate a demo that exists here on apple's html5 site demos site. You can see the demos in action if you use safari or on any smart-phone mobile browser.
The particular demo is their 360 view with the iPod Touches. I thought it would be nice to re-create it to implement it on my site, of course with different pictures.
I tried and tired but I could not find anything on google about javascript and 360 degree views or coding it myself. I then thought about downloading the view source code for this page

Upon doing so and linking the files correctly. I tried one version linking to the file's on apple's server and another version linking to files on my local computer after downloading them. And by files, I mean the CSS, JS, and images.

However, when I ran it in safari or any other browser everything is displayed except the 360 version. You can have a look for yourself here
This is the version linking to the files on their server.
This is the version linking to the files on mine.

So i was wondering if someone could possibly help me recreate the Demo and or help me code a 360 view using javascript and css as Apple says they did to make theirs

Please reply if you have any questions, comments, concerns, or solutions I can provide the files and code if it helps. I believe i have linked to everything though in my post.

Thanks in advance and Regards,
Team 1504

[Mittineague]

I'm guessing this is a "Safari only" thing. When I went to the demo page I got a message saying I needed Safari (which I can't download to test it).

Does your clone work OK in Safari at least?

[team1504]

hey mittineague,
Apple had wanted it to be a safari only thing, but upon editing some of the scripts i got it working in all browsers.

I do not know if it was a file permissions issue, but i believe it was a linking issue.

So yes, i got it working and with any picutres too

If you want, i could upload it to my server and post a link to that people who view this thread can have some reference.

Basically, what I did though was that i downloaded my own copy of a js file they wrote called threeSixty.js
This file then called upon whatever of 72 images the user was currently looking at based on the view.
The problem was that the js file both online and the one i downloaded were using a relative URL to link to the pictures. Once i change the relative to an absolute by adding http://developers.apple.com/
to "showcase/html5/threesixty/images/"
it was able to display a 360 view of the ipod touches

I later downloaded all 72 images so that the script would work offline and it did. And then replaced the images with 72 shots going 360 degrees around what i wanted to be viewed.


Thanks and Regards,
Team 1504

[AlexDawson]

I would avoid using anything which is vendor locked on anything within a production environment (for cross browser gracefully degrading code).

But kudos for getting the example to work cross browser - does your examine gracefully degrade in CSS3 lacking browsers?

[team1504]

Thank you Alex. Yes i did make it cross browser and thanks for the kudos
However as it was orignially stated by Apple, it runs with CSS3 which safari 5 supports.
When I made it cross browser I edited a JavaScript file that checked if safari was it browser. I then used CSS3 and if necessary some CSS2 to suffice in browsers that don't support the CSS3 elements.
However I also do not believe that any of the 3d, border-radius, or mostly unsupported Css3 features.

It does become slightly choppy but for now it is good enough. I have yet to try it in ie6 tho....
However with ie9 coming up with apparently much more CSS support I am not so worried.

[team1504]

Thank you Alex. Yes i did make it cross browser

Actually, I guess i did not because it doesnt seem to work in IE

I hope u guys didnt unsubscribe from this thread

it seems to be a css3 positioning issue because it seems to be executing the javascript.


Also i was wondering if there was a way one can detect if the browser is any ie under 9. Because apparently ie9 will have some css3 support.
I know that one can append styling based on if it is IE,
but i guess it could make more sense if i explain some things...

What i am doing is having a div which contains the mainContent of the page. On my homepage, I will implement a javascript that is one of those Carousel script. It is this one, i bought it from code canyon.
Sorry for not coding it myself.

So the first slide will be an introduction and the second slide will be this 360 degree view.

I know this may be something i have to ask the writer of the script, but is there a way that i can not have this script work if the browser is IE.
Because the second slide is the content that wont work in IE.
I guess i could somehow check if IE is the browser and if so disable or not link an essential js file to that script?
That way it will be stuck on displaying the first slide, which is just an intro of text and links.

I hope you guys can understand what I am talking about and I am willing to provide my code and further explanation if it helps.
In other words, the things i wanted you to help me with would be,
1.) fixing the script so it works in ie8 if possible ie7
by using optional css2 if necessary if IE
2.) How to sense the browser or if it is IE using JS or another method
3.) And somehow sensing if Javascript is turned off

Thanks in advance and Regards,
Team 1504

[Mittineague]

AFAIK, "best practice" is to code everything in it's most "basic" form so that it looks and acts "OK" even without javascript or any CSS.

Then, instead of browser detection, do feature support, and if it's there, add it. Otherwise they get the "OK" page.

[team1504]

i have learned that in my experience in web-design that making you site without relying on js or unsupported css3.

However, i was copying something apple developed for now.
Maybe if i attach the code could you help me get it maybe working in IE?

Also, i apologise if adding the questions on detecting browsers or if JS is on or off were too off topic for this thread

Thanks in advance,
Team 1504

[PhotoSpherix]

I hate to pick up the thread late, but there are a few options out there in jquery that do what you are looking for.

http://jquery.vostrel.cz/reel

and

http://www.ajax-zoom.com/examples/example15.php

The first one is free and the second is a pay option.

[team1504]

Thank you for pointing those out, I will take a look at them

[zaksdesign]

If you want, i could upload it to my server and post a link to that people who view this thread can have some reference.

Hi Team 1504
I am trying to figure how can i access the 360 code
I will appreciate if you upload the code (after your changes) to a server and provide a link
thanks in advance
Beni