Sie sind nicht angemeldet.

1

Mittwoch, 11. Juli 2012, 15:28

Changing Default Load Pano on the Fly

I have a pano project with 4 panos within. I would like to call the Pano Project and during the call pass via the HTML which pano would be the default pano to view. Is this possible?
I am using Kolor to generate the HTML and XML files. I would like to setup different HTML files that load a different default pano for that HTML page but yet still show all 4 panos but only change the default load pano.

Hopfully this makes sense. Thank you in advance for your help. *smile*

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

2

Mittwoch, 11. Juli 2012, 15:47

Normally you would do:

Quellcode

1
2
3
4
5
<script>
  var viewer = createPanoViewer({swf:"krpano.swf",target:"panocontent"});
  viewer.addVariable("xml", "virtualtour2.xml");
  viewer.embed();
</script>


The problem with Kolor is, they include virtualtour.xml which holds the default settings, which includes the photo (virtualtour1.xml for example)

But if you edit virtualtour.xml, and change:

Quellcode

1
<include url="virtualtour1.xml" />


to

Quellcode

1
<include url="%$startup%" />


and in the html you change the embed script to this:

Quellcode

1
2
3
4
5
<script>
  var viewer = createPanoViewer({swf:"krpano.swf",target:"panocontent"});
  viewer.addVariable("startup", "virtualtour2.xml");
  viewer.embed();
</script>


it should work.

Otherwise, use method 1, and include virtualtour.xml in every photo xml.

3

Mittwoch, 11. Juli 2012, 17:07

I tried this with no luck??

I've tried a couple of different options however all I get is a blank view.
And still not sure why. When I create viewer how does it know to atached the the embedpano?

Quellcode

1
2
3
4
    <!--************** Open the first pano ********************************************************-->
    <!--*** <include url="LLBean100Year0.xml"/> -->
    <include url="%$startup%"/>
    <autorotate enabled="false"/>

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
45
46
47
48
49
50
51
52
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> 
 <title>LLBean100Year - Virtual Tour generated by Michael Kintner of AmazingAerialPhotos.com and i360Views.com</title>
 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>    <!-- Open Graph tags for Facebook -->
    <meta property="og:url" content="$(VIRTUALTOURURL)/LLBean100Year.html" />
    <meta property="og:title" content="LLBean100Year" />
    <meta property="og:description" content="Virtual Tour by Michael Kintner of AmazingAerialPhotos.com and i360Views.com" />
    <meta property="og:type" content="video" />
    <meta property="og:image" content="$(VIRTUALTOURPREVIEWURL)"/> 
    <meta property="og:video" content="$(VIRTUALTOURURL)/LLBean100Year.swf"/> 
    <meta property="og:video:height" content="150" />
    <meta property="og:video:width" content="300" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />   <style type="text/css">
    @media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
    * { padding: 0; margin: 0; }
    html { height: 100%; }
    body { height: 100%; overflow:hidden; }
    #container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
  </style></head>
<body itemscope itemtype="http://schema.org/MediaObject">
 <script>
   var viewer = createPanoViewer({swf:"LLBean100Year.swf",target:"panocontent"});
   viewer.addVariable("startup", "LLBean100Year0.xml");
   viewer.embed();
</script>
  <script src="swfobject/swfkrpano.js"></script>
    <div id="container">
      <!-- schemas.org tags for google+ -->
      <meta itemprop="playerType"  content="Flash" />
      <meta itemprop="description" content="Virtual Tour by Michael Kintner of AmazingAerialPhotos.com and i360Views.com"/>
      <meta itemprop="image" content="$(VIRTUALTOURPREVIEWURL)" />
      <meta itemprop="url"   content="$(VIRTUALTOURURL)/LLBean100Year.html" />
      <meta itemprop="contentUrl" content="LLBean100Year.swf" />
      <meta itemprop="height" content="400" />
      <meta itemprop="width"  content="400" />      <div id="panoDIV" style="height:100%;">
        <script>
          embedpano({target:"panoDIV",swf:"LLBean100Year.swf",wmode:"transparent"});
        </script>
          <noscript>
            <div id="tour">
              <object width="100%" height="100%">
                <embed src="LLBean100Year.swf" width="100%" height="100%" allowFullScreen="true" wmode="transparent"></embed>
              </object>
            </div>
          </noscript>
        </div>
      </div>
    </div>
</body>
</html>

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

4

Mittwoch, 11. Juli 2012, 18:58

Kolor uses the object tag to place krpano (which is in my opinion bad, and they should rely on swfobject)

replace this

Quellcode

1
2
3
 <script>
          embedpano({target:"panoDIV",swf:"LLBean100Year.swf",wmode:"transparent"});
        </script>


with this:

Quellcode

1
2
3
4
5
 <script>
   var viewer = createPanoViewer({swf:"LLBean100Year.swf",target:"panoDIV", ,wmode:"transparent"});
   viewer.addVariable("startup", "LLBean100Year0.xml");
   viewer.embed();
</script>


Here's a simpler html file, if you run into troubles:

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
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title></title>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <style type="text/css">
    @media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
    * { padding: 0; margin: 0; }
    html { height: 100%; }
    body { height: 100%; overflow:hidden; }
    #container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
  </style>
</head>
<body>
  <script src="player/tour.js"></script>
  <div id="container">
      <div id="panocontent" style="height:100%;">
		<script>
		  var viewer = createPanoViewer({swf:"LLBean100Year.swf",target:"panocontent"});
                 viewer.addVariable("startup", "LLBean100Year0.xml");
		  viewer.embed();
		</script>
        </div>
      </div>
</body>
</html>

5

Mittwoch, 11. Juli 2012, 23:31

Well, I'm getting closer. Now at least I'm getting and error. Its like it doesn't recognize the variable name.

FATAL: %$startup% - loading error (IO Error)


Quellcode

1
2
3
4
	<!--************** Open the first pano ********************************************************-->
	<!--*** <include url="LLBean100Year0.xml"/> -->
	<include url="%$startup%"/>
	<autorotate enabled="false"/>


Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  	<div id="panoDIV" style="height:100%;">
				<script>
				   var viewer = createPanoViewer({swf:"LLBean100Year.swf",target:"panoDIV",wmode:"transparent"});
				   viewer.addVariable("startup", "LLBean100Year0.xml");
				   viewer.embed();
				</script>      	
				<noscript>
        	<div id="tour">
          	<object width="100%" height="100%">
            	<embed src="LLBean100Year.swf" width="100%" height="100%" allowFullScreen="true" wmode="transparent"></embed>
          	</object>
        	</div>
      	</noscript>
    	</div>
  	</div>

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

6

Donnerstag, 12. Juli 2012, 00:17

Hmm, there seems to be a bug (or hidden option) with the swf provided by Pano tour pro. Mine doesnt work either, but if I copy a clean krpano.swf from the download page it works. Try that, or look for an option in pano tour pro called something like "disable external parameters"