You are not logged in.

KrPano as Backgroundof html page

dyroau

Beginner

  • "dyroau" started this thread

Posts: 2

  • Send private message

1

Tuesday, December 4th 2012, 3:34pm

KrPano as Backgroundof html page

I would like to use a kr pano as a scrolling background for a website is there a way to build a website over a krpano ?

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

2

Tuesday, December 4th 2012, 6:32pm

Hi,

with the right Flashplayer wmode embedding setting (opaque or transparent), it is possible to let other html elements overlap the Flashplayer.

Best regards,
Klaus

dcc

Beginner

Posts: 17

Location: London

  • Send private message

3

Saturday, December 8th 2012, 3:18am

KRPano Website

Check out z360.com
I have built my new website using krpano with some html additions
Might not be what you are looking for, but I hope you like it!
Main problems were the restrictions of textfield.swf
And of course my own programming abilities...
Yours Douglas

Pavel Bogdanov

Beginner

Posts: 1

  • Send private message

4

Thursday, February 21st 2013, 6:53am

RE: KrPano as Backgroundof html page

Quoted from "dyroau"

is there a way to build a website over a krpano ?
Yes, it's possible. Try something like this:

Source code

 
1
2
3

<!DOCTYPE html><html><head>	<title>My site</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>		#mysite {		display:block; 		position:absolute; 		padding: 20px; top: 50; 		left: 10%; z-index: 10; 		border-radius: 10px; 		background-color: #fff; 		font-color: #000; 		margin: 50px auto; 		width: 80%; 		border: 1px solid #777;		}		@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }		html { height:100%; }		body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; background-color:#fff; }		a{ color:#AAAAAA; text-decoration:underline; }		a:hover{ color:#FFFFFF; text-decoration:underline; }	</style></head><body>
<script src="SWFOBJECT.js"></script>
<div id="pano" style="width:100%; height:100%; position:absolute; top: 0; z-index: 0;">	<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>	  var viewer = createPanoViewer({swf:"mypanorama.swf", target:"pano", width:"100%", height:"100%", wmode:"transparent", passQueryParameters:true, });	  viewer.addVariable("xml", "mypanorama.xml");	  viewer.embed();	  viewer.addVariable(ath, 90);	</script></div><div id="mysite" style="" >	Content goes here<br/>	Content goes here<br/>	Content goes here<br/>	Content goes here<br/>	Content goes here<br/>	Content goes here<br/>	Content goes here<br/>	Content goes here<br/></div></body></html>

Similar threads