News • Examples • Documentation • Download • Buy • Forum • Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

NOTE: This page is from an older version, see the latest version here.

Embedding into HTML Version 1.0.8.12

There are several ways to embed the krpano viewer into a HTML page, but the swfkrpano.js script is the current default and most functional embedding method provided by krpano.
... for other embedding methods have a look ⇒ here
The script does many things automatically and it fixes a lot of browser and system related issues. This makes the embedding easy and simple.
The script is based on the SWFObject 1.5 and the krpano swfkrpanomousewheel.js script, both scripts can also be used separately and without the additional krpano functions.

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).

... have a look here for a Mouse wheel test page

Usage syntax:

At the first include the script itself: 
<script src="swfkrpano.js"></script>


In the current krpano Version (1.0.8.12) there are 3 basic embedding functions:

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 embedPanoViewer / embedpano 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>

Note - panocontent is a the ID of the html object, where the krpano viewer will be embedded: 
<div id="panocontent">...alternative content...</div>

Function description:

var viewer = createPanoViewer(parametersobject);
viewer.embed();
or:
embedPanoViewer(parametersobject);
or simply:
embedpano(parametersobject);
The createPanoViewer function creates and preparses the pano object for embedding. The embedding object will be returned for addtional settings. With calling the embed function the viewer will be finally embedded.
The embedPanoViewer and embedpano functions (both the same) are directly creating and embedding the viewer.

The parametersobject is a Javascript Object with the following attributes:
  • swf (optional)
    Name and path to the swf file (relative to the html file). The default is "krpano.swf".
  • xml (optional)
    Name and path to the pano xml file (relative to the html file). By default the name of the swf file (="krpano.xml" without swf setting).
  • target
    The ID of the HTML object where the viewer should be embedded. Can be overwritten in the embed() function.
  • id (optional)
    The ID of the viewer object in the HTML DOM.
    Get the krpano Javascript Interface from this object.
    The default ID is "krpanoSWFObject".
  • width (optional)
    Width of the Viewer object, can be a absolute pixel value or a relative percent value.
    Default = "100%".
  • height (optional)
    Height of the Viewer object, can be a absolute pixel value or a relative percent value.
    Default = "100%". 
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);
The createswf and createkrpanoSWFviewer functions are the same (just different names) and they create the object for embedding the pano. They will automatically use the krpanoJS Viewer when necessary (on the iPhone/iPad). The createkrpanoJSviewer function on the other side uses always the krpanoJS viewer.

Parameters:
  • swffile
    Name and path to the swf file (relative to the html file).
  • id (optional)
    ID of the Flash object in the HTML DOM.
    Get the krpano Javascript Interface from this object.
    The default ID is "krpanoSWFObject".
  • width (optional)
    Width of the Flash object, can be a absolute pixel value or a relative percent value.
    Default = "100%".
  • height (optional)
    Height of the Flash object, can be a absolute pixel value or a relative percent value.
    Default = "100%".
  • bgcolor (optional)
    Default Background color of the Flash object.
    Default = "#000000" (=Black). 
viewer.addVariable(variable, value);
  • set krpano variables
  • either set the krpano startup variables here (e.g. the "xml" or "path" variable for the path / name of the startup xml file) or ...
  • ... set any other krpano variable here.
    the variables set here, will be set when xml file was loaded and parsed, so these variables can be used to overwrite variables / settings from the xml. 
viewer.addParam(parameter, value);
  • set Flashplayer parameters
  • The only parameters that make sense in krpano are allowFullscreen, allowScriptAccess and wmode, where allowFullscreen will be automatically set to true by the swfkrpano.js script. 
viewer.passQueryParameters();
  • Passes automatically all query parameters from the html to the swf file.
viewer.useHTML5(setting);
  • Define when to use the krpanoJS HTML5 Viewer.
  • Only for the createPanoViewer function!
  • setting:
    • "auto" (default)
      use HTML5 automatically (at the moment only on the iPhone//iPod/iPad)
    • "always"
      use HTML5 always (there will be errors when not supported!)
    • "whenpossible"
      use HTML5 always when possible (at the moment only on the Desktop Safari 5 and on the iPhone//iPod/iPad)
viewer.isHTML5possible();
Check if the browser is capable for the HTML5 3D CSS transforms.
Ath moment this are only Safari 5 and Chrome 9. 
var ret = viewer.isDevice(devices);
  • Check if the current viewing device is one of the given devices.
  • Only for the createPanoViewer function!
  • devices:
    • "iPhone"
    • "iPod"
    • "iPad"
    • "Android"
    Several devices can be checked at once by connecting the device strings by '|' character. e.g. 
    if( viewer.isDevice("iPhone|iPod|Android") )
viewer.embed(id);
  • Finally embedded the krpano Flash object to the (by the id) given html object.

Examples:

1. Most simple usage:

<script> embedpano({target:"panocontent"}); </script>
Here all default values will be used: "krpano.swf" as name for the flash viewer file, "krpano.xml" as default xml file, "krpanoSWFObject" as viewer id and 100% as size. Only the target where the pano should be embedded must be set.

2. Simple usage but with more settings:

<script>
  embedpano({swf:"pano.swf",xml:"pano.xml",target:"panodiv",id:"pano1"});
</script>
Here also the paths to swf and xml files and the id of the viewer object will be set.

3. Most simple usage of the createPanoViewer function:

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

4. Advanced usage of the createPanoViewer function:

<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>

5. Use only the HTML5 krpanoJS viewer:

<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>

6. Most simple usage of the createswf function:

<script>
  var swf = createswf("krpano.swf");
  swf.embed("krpanoDIV");
</script>
In this example the krpano "default loading" is used.
When no xml file is specified a .xml file which is named like the .swf will be loaded.
e.g. a krpano.swf will load the krpano.xml.

7. Simple createswf example with a xml file:

<script>
  var swf = createswf("krpano.swf");
  swf.addVariable("xml", "pano.xml");
  swf.embed("krpanoDIV");
</script>
In this example the the path to the start xml file was set by the xml variable.

8. Advanced createswf example: set ID and width and height

<script>
  var swf = createswf("krpano.swf","krpanoSWFObject","640","480");
  swf.addVariable("xml", "pano.xml");
  swf.embed("krpanoDIV");
</script>
Addtionally to the example above here also the size (640x480) of the Flash object was set.