it can be done. wmode cripples performance in IE9 so i had to remove wmode from my html. i still wanted to be able to open windows on top of krpano so i started searching. turns out it can be done. Click to start the tour then in the bottom left corner is an icon click that and it makes the div visible on top of krpano. click it a second time to close div. my mail form is displaying in 2 different sizes in IE and FF which is why i have the large background div. i am still working on making this look better i have to find out why the form is 2 different sizes then i can make a perfectly sized div that looks better. but this opens doors in krpano without having to accept the performance loss of wmode. should be able to add the HTML version of the Facebook "like" button on top of krpano in a corner next.
DIV over Krpano without WMODE = YES
-
-
Hello!
Without wmode it's works much better!How did you do that (abou div over pano)??? Please tell me
Thanks in advance!
-
this is wow stuff.
i am looking for same thing for my ipad version of krPanoJS. could you please guide how you manage to get div over player ?
-
I'd love to know it, too!
-
Okay, it's really simple:
Code
Display More<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=218535434871997"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script src="tour.js"></script> <div id="layer" style="width:100px; height:50px; position:absolute; bottom:100px; right:10px; z-index:2;"> <div class="fb-like" data-href="URL TO LIKE" data-send="false" data-layout="box_count" data-width="500" data-show-faces="true" data-font="trebuchet ms"></div> </div> <div id="pano" style="width:100%; height:100%; z-index:1;"> <noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript> <script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"}); </script> </div>
-
Actually it isn't as simple as I thought it is, because the buttons disappear when switching to fullscreen mode.
This is my current code:
HTML
Display More<!DOCTYPE html> <html> <head> <title>Swimming Hostel Berlin - Interaktive 360°-Panoramatour</title> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style> html { height:100%; } body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; } a{ color:#AAAAAA; text-decoration:underline; } a:hover{ color:#FFFFFF; text-decoration:underline; } </style> <script type="text/javascript" src="speichern/js/swfobject.js"></script> <script type="text/javascript" src="speichern/js/downloadify.min.js"></script> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=218535434871997"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'de'} </script> <script src="tour.js"></script> <div id="layer" style="position:absolute; top:13px; left:10px; z-index:2;"> <div style="position:relative; float:left; height:20px; width:75px;"><g:plusone size="medium"></g:plusone></div> <div style="position:relative; float:left; height:20px; width:95px;"> <div class="fb-like" data-href="http://www.panoptikum-berlin.de/tl_files/Panoramen/swimminghostel/praesentation/tour.html" data-send="false" data-layout="button_count" data-width="" data-show-faces="false" data-font="trebuchet ms"></div> </div> <div style="position:relative; float:left; height:20px; width:60px;"> <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="de">Twittern</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </div> </div> <div id="pano" style="width:100%; height:100%; z-index:1;"> <noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript> <script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"}); </script> </div> </body> </html>
So if anybody knows how to fix it, let me know.
-
to add a HTML layer on top of a Fullscreen Flash tour is inpossible. Flash itself disallows callign javascript (which is needed to control html from within flash) from fullscreen mode. the reason is, one could easily scam/takeover information the user types. Its a security issue.
you should use onenterfullscreen events to handle stuff like that (disable/hide email button, or show warning) or use flash email forms (not incredible hard to make, lots of tutorials across the web)
to have social buttons in flash you have to recreate them using the several API's. Facebook has an outstanding api to like/get likes. Although not real simple.
-
Well, crap. That's too much for me. Thanks for your answer.
-
here is a solution for a facebook like button all done in flash, not quick or simple...
http://labs.byhook.com/2010/08/03/fac…utton-in-flash/
sam
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!