close panorama

Embedding into HTML

Methods for embedding the krpano Viewer into the HTML page:

Examples for each embedding method are included in the krpano viewer download package in the folder "examples/swf-to-html-embedding".

SWFObject 1.5

The usage of the SWFObject 1.5 Javascript for embedding krpano. Additionally there is the krpano specific swfkrpanomousewheel.js script for fixing the Mouse wheel issues.
Advantages:
  • check for installed Flashplayer
  • alternative content like link to Flashplayer download
  • check for correct Flashplayer Version
  • Flash Express Install Support
  • Javascript access to the flash object
  • Javascript bugfixes possible (Mousewheel scrolling, Mac bugfixes)
Disadvantages:
  • Javascript needed
  • additional files needed (swfobject.js, swfkrpanomousewheel.js)
SWFObject 1.5 Mouse wheel test page
SWFObject 1.5 HTML Example:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfkrpanomousewheel.js"></script>

<div id="krpanoDIV">
    <noscript>...javascript neededed...</noscript>
</div>

<script type="text/javascript">
  if (typeof(deconcept) !== 'undefined' && deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
  {
    var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000");
    so.addParam("allowFullScreen","true");
    so.addVariable("xml", "krpano.xml");

    if ( so.write("krpanoDIV") )
    {
      var wheelfix = new SWFkrpanoMouseWheel(so);
    }
  }
  else
  {
    document.getElementById("krpanoDIV").innerHTML = '...Flashplayer needed...';
  }
</script> 

SWFObject 2.2

The usage of the SWFObject 2.2 Javascript for embedding krpano. Additionally there is the krpano specific swfkrpanomousewheel.js script for fixing the Mouse wheel issues.
Advantages / Disadvantages
  • the same like SWFObject 1.5
SWFObject 2.2 Mouse wheel test page
SWFObject 2.2 HTML Example:
<html>
<head>
  <title>...</title>

  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript" src="swfkrpanomousewheel.js"></script>

  <script type="text/javascript">
    if (swfobject.hasFlashPlayerVersion("9.0.28"))
    {
      swfobject.embedSWF("krpano.swf","krpanoDIV","100%","100%","9.0.28",null,{xml:"krpano.xml"},{allowfullscreen:true,bgcolor:"#000000"},{id:'krpanoSWFObject',name:'krpanoSWFObject'});
      swfkrpanomousewheel.registerObject("krpanoSWFObject");
    }
    else
    {
      document.getElementById("krpanoDIV").innerHTML = '...Flashplayer needed...';
    }

  </script>
</head>
<body>
  <div id="krpanoDIV">
    <noscript>...javascript neededed...</noscript>
  </div>
</body>
</html>

without Javascript (not recommended!)

The direct usage of the <object> and <embed> tags for embedding Flash objects. Some browsers will use the <object> tag and some the <embed> tag, so to support all kind of browsers it was necessary to use both tags.
Advantages:
  • no Javascript necessary
Disadvantages:
  • no checking for an installed Flashplayer
  • no Flashplayer version check
  • no alternative content
  • parameters / arguments must be set twice (once for object tag and once for embed tag)
  • no Javascript access to the Flash object
  • no Javascript Browser / Flashplayer bugfixes possible (Mousewheel, Mac, wmode)
Embedding without Javascript Online Example
without Javascript HTML Example:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
        height="100%" width="100%">
  <param name="movie"           value="krpano.swf">
  <param name="flashvars"       value="xml=krpano.xml">
  <param name="allowFullScreen" value="true">
  <embed pluginspage="http://www.macromedia.com/go/getflashplayer"
         height="100%" width="100%" allowFullScreen="true"
         src="krpano.swf"
         flashvars="xml=krpano.xml" />
</object>