Embedding into HTML (swfkrpano.js) for version 1.0.8.14

Select Version:

• 1.0.8.12
• 1.0.8.14

Function of the swfkrpano.js script:

• Automatic checking if Javascript is enabled ⇒ if not it shows a warning.
• Automatic checking if there is a Flashplayer installed and if the installed version is okay.
• Automatic checking for iPhone, iPad or iPod Touch devices and loading the alternative krpano Javascript viewer (krpanoJS / krpanoiphone.js).
• It allows generating a single Javascript file which has all other Javascript files embedded (swfkrpano.js + krpanoiphone.js + license). When using the krpano make pano droplets with the setting embedlicenses=true this will be done automatically.
• It enables the usage of the Mouse wheel for zooming on Mac OSX systems.
• It fixes the mouse wheel usage on the HTML page - don't scroll the page when zooming inside the pano.
• It fixes the mouse behaviors when using the Flashplayer wmode = transparent / opaque settings (in detail - it enables the mouse wheel usage and fixes the mouse release outside the pano window).
• It enables the usage of the Flashplayer Fullscreen Mode automatically.
• Easy and simple usage of the embedding code.
• It provides additional helper functions (passing parameters).

Usage syntax:

<script src="swfkrpano.js"></script>

1. The createPanoViewer function:

<script>
  var viewer = createPanoViewer({swf:"krpano.swf",target:"panocontent"});
  viewer.addVariable("xml", "pano.xml");
  viewer.embed();
</script>

2. The single line embedpano or embedPanoViewer function:

<script>
  embedpano({swf:"krpano.swf",xml:"pano.xml",target:"panocontent"});
</script>

3. And the (old) createswf function:

<script>
  var viewer = createswf("krpano.swf");
  viewer.addVariable("xml", "pano.xml");
  viewer.embed("panocontent");
</script>

<div id="panocontent">...alternative content...</div>

Function description:

var viewer = createPanoViewer(parametersobject);
viewer.embed();
or:
embedPanoViewer(parametersobject);
or simply:
embedpano(parametersobject);

var viewer = createswf(swffile, id, width, height, bgcolor);
or:
var viewer = createkrpanoSWFviewer(swffile, id, width, height, bgcolor);
or: (for the krpanoJS HTML5/iPhone/iPad viewer only)
var viewer = createkrpanoJSviewer(id, width, height);

viewer.addVariable(variable, value);

viewer.addParam(parameter, value);

viewer.passQueryParameters();

viewer.useHTML5(setting);

viewer.isHTML5possible();

var ret = viewer.isDevice(devices);

viewer.embed(id);

Startup / Embedding Variables

• xml or pano
  With the xml or pano variable (both the same) it's possible to specify the path / name of the startup xml file.
  When no xml or pano variable will set then the 'default loading' will happen, which tries to load a xml file which has the same 'basename' as the swf file (e.g. krpano.swf ⇒ krpano.xml or pano.swf ⇒ pano.xml or tour.swf ⇒ tour.xml and so on ...).
  
  
• license
  By default and when no license is embedded then the krpano Flash viewer tries to load a license file which has the same 'basename' as the swf file (e.g. krpano.swf ⇒ krpano.license or pano.swf ⇒ pano.license or tour.swf ⇒ tour.license and so on ...).
  But with the license variable it's possible to set a custom path / name of the license file.
  
  
• simulatedevice
  The krpano viewer detects on which device (Desktop, iPhone, iPad, Android, ...) it is running, even with changed User-Agent of the Browser.
  This was done to load the right images regardless of the User-Agent - on Desktop the bigger Desktop images will be loaded, on iPhone/iPod 3 the smaller <mobile> images and on iPhone/iPod 4 and iPad the middle-sized <tablet> images. Addtionally there is an automatic internal scaling on the iPhone/iPod devices.
  
  So to allow testing the iPhone / iPad / Android images and scalings also on Desktop there is the simulatedevice setting. Possible settings are:
  • "iphone" - simulate the iPhone/iPod (krpanoJS only, <mobile> images and downscaled layout)
  • "ipad" - simulate the iPad (krpanoJS only, <tablet> images)
  • "useragent" - simulate the device depending on the User-Agent (krpanoJS only, Desktop, iPhone or iPad)
  • "androidmobile" - simulate an Android Mobile device (Flash only)
  • "android" or "androidtalbet" - simulate an Android Talbet device (Flash only)
  The krpano iPhone/iPad Simulator (included in the viewer download package) is using that setting together with an iPhone / iPad background and an original sized viewing window.

Examples:

<script> embedpano({target:"panocontent"}); </script>

<script>
  embedpano({swf:"pano.swf",xml:"pano.xml",target:"panodiv",id:"pano1"});
</script>

<script>
  var viewer = createPanoViewer();
  viewer.embed("panodiv");
</script>

<script>
  var viewer = createPanoViewer({swf:"krpano.swf",target:"panodiv"});
  
  viewer.useHTML5("whenpossible");
  
  if( viewer.isDevice("iPhone|iPod|Android") )
    viewer.addVariable("xml", "krpano_mobile.xml");
  else
    viewer.addVariable("xml", "krpano.xml");

  viewer.embed();
</script>

<script>
  var viewer = createPanoViewer();
  
  if ( viewer.isHTML5possible() )
  {
    viewer.useHTML5("always");
  
    viewer.addVariable("xml", "pano.xml");

    viewer.embed("panodiv");
  }
  else
  {
    // show error message:
    // browser is not HTML5/CSS 3D transforms capable.
  }
</script>

<script>
  var swf = createswf("krpano.swf");
  swf.embed("krpanoDIV");
</script>

<script>
  var swf = createswf("krpano.swf");
  swf.addVariable("xml", "pano.xml");
  swf.embed("krpanoDIV");
</script>

<script>
  var swf = createswf("krpano.swf","krpanoSWFObject","640","480");
  swf.addVariable("xml", "pano.xml");
  swf.embed("krpanoDIV");
</script>