Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Montag, 1. August 2011, 12:43

Problems with krpano in a jquery Webapp

hi,
i trying now for days to insert a krpano pano into my jQuery Mobile App, but that didn work well. If i insert the pano into my normal jQuery Mobile page and than link from a other page to it, i dont see the pano. This Problem is not only on the iphone but also in the normal desktop browser. I checked the paths and everything else, but i didn find the problem. If i kick out the whole jquery code, the pano works great. So now i post both sites:

site.html

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="viewport" content="width=320; height:480; initial-scale=1.0; maximum-scale=1.0; user-scalable=1.0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta names="apple-mobile-web-app-status-bar-style" content="black" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
	<link href="images/startup.png" rel="apple-touch-startup-image" />
<meta content="minimum-scale=0.9, width=device-width, maximum-scale=0.6667, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
	<div data-role="header" style="width:100%;">
		<a href="referenzen.html" data-role="button" data-icon="arrow-l" style="margin-left:-8px;">Zurück</a> <div style="float:left;padding-top:5px;padding-left:90px;"><img src="images/logo.png" alt="" /></div><div style="margin-left:60px;margin-top:12px;"><span>Attersee</span></div>
     	<div style="float:right;padding-right:3px;margin-top:-24px;"><a href="index.html" target="_parent" data-role="button" data-icon="home" data-iconpos="notext">Home</a></div>
	</div><!-- /header -->

	<div data-role="content">
	<div style="margin-left:-10px;margin-top:-10px;">
	<a href="touren/see/test.html"><img src="images/attersee.jpg" alt="Attersee"  /></a>
	<img src="images/landungssteg.jpg" alt="Landungssteg Attersee"  />	</div>
  </div><!-- /content -->
</div><!-- /page -->
</body>
</html>


test.html

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=320;  initial-scale=1.0; maximum-scale=1.0; user-scalable=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="yes" name="apple-mobile-web-app-capable" />
	<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
	<link href="images/startup.png" rel="apple-touch-startup-image" />
<meta content="minimum-scale=0.9, width=device-width, maximum-scale=0.6667, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	<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>
</head>
<body>
<div data-role="page" id="see">
<div id="pano" style="width:100%; height:100%;">
<script src="panos/see/see.js"></script>
	<script>
		var viewer = createPanoViewer({swf:"tour.swf", xml:"panos/see/see.xml", target:"pano"});
		
		if ( viewer.isHTML5possible() )
		{
			viewer.useHTML5("always");
			viewer.embed();
		}
		else
		{
			// show error message
			document.getElementById("nonhtml5infos").style.display = "inline";
		}
	</script>
	</div>
</div><!-- /page -->
</body>
</html>

2

Dienstag, 2. August 2011, 20:14

i think there is not clear sollution for that problem! or can someone help?

3

Samstag, 3. Dezember 2011, 14:46

One solution to your problems

<div data-role="page" class="page-tour">
<script src="tour.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />


<div data-role="content">
<div id="panodiv">
<!-- tour loads here -->
</div>
</div>

<script>
var viewer = createPanoViewer();
if ( viewer.isHTML5possible() ) {
viewer.useHTML5("always");
viewer.addVariable("id", "krpanoSWFObject");
viewer.addVariable("xml", "tablet.xml");
viewer.embed("panodiv");
}
else {
alert('Error: Browser is not capable of showing this tour');
}
</script>

<script>function krpano() { return document.getElementById("krpanoSWFObject"); }</script>

</div>
And then the stylesheet contains the following:

Quellcode

1
.page-tour, .ui-content, #panodiv { width: 100%; height: 100%; padding: 0; }


I have added a class of page-tour to the data-role page for referencing.
Hope that helps.

Sorry that I am not using your code but I had this already on my pc but I am sure you can implement it.