close panorama

Embedding into HTML Version 1.0.8.14

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>


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

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%".
  • bgcolor (optional)
    The background color of the viewer (in HTML Color Format).
    Default = "#000000" (=Black).
  • useHTML5 (optional)
    Directly set the useHTML5 setting.
  • vars (optional, embedpano() only)
    A Javascript Object that can contain krpano variables that should be set.
  • wmode (optional, embedpano() only)
    Directly set the wmode parameter.
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 "pano" 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 might be errors or wrong display when not supported!)
    • "whenpossible"
      use HTML5 always when possible (at the moment only on the Desktop Safari and on the iPhone/iPod/iPad)
viewer.isHTML5possible();
Check if the browser is capable for the HTML5 3D CSS transforms.
At the moment this is only the Safari Browser.
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.

Startup / Embedding Variables

There are some special variable for embedding the viewer. These variables will not directly passed to the viewer - they have a special meaning for the embedding itself:

  • 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 "androidtablet" - simulate an Android Tablet 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:

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.