For embedding the krpano viewer into a HTML page the embedpano.js script need to be used.
This script does many important detection and setup things automatically, e.g. a device/system feature detection (Flash or HTML5)
and it also fixes automatically a lot of browser and system related issues and limitations (Mouse wheel usage).
This makes the embedding of the krpano viewer easy and simple - one script include and one line embedding code is enough.
Creating and embedding the krpano viewer into the HTML page.
Automatically check for Flash or HTML5 support and automatically loading the appropriate krpano viewer.
Several cross-browser, cross-system Mouse wheel fixes
(page-scrolling, wheel-zooming, Mac support, touchpad/continues-wheel support, wheel speed normalization).
Fixing of several Flashplayer limitations when using wmode=transparent / opaque.
Automatically enabling the usage of the Flashplayer Fullscreen Mode.
The script can be also merged together with the krpano HTML5 viewer script into one single script file (e.g. a 'tour.js').
When using the krpano MAKE PANO or MAKE VTOUR droplets this will be done automatically by default.
This object is used to pass all parameters (in random order) by using parametername:value pairs.
Almost all parameters (except the target parameter) are optional - when they were not defined, their default values will be used.
window - The default setting, a compromise between system support and performance.
Note: On many systems and browsers, html elements can't overlap the Flashplayer in this mode!
See this wmode link for details.
opaque - Allow other html elements to overlap the Flashplayer (slower rendering performance).
transparent - Makes the Flashplayer background transparent to allow seeing html elements
behind the Flashplayer and additionally also allow other html elements to overlap the Flashplayer
(even more slower rendering performance).
direct - Best performance, hardware accelerated presentation, no html overlapping on many systems and browsers
(this is typically the fastest mode but on incompatible or older systems/browsers this can cause heavy slowdowns).
HTML5 Notes: The wmode is typically a Flash-only setting,
but wmode=transparent will be also evaluated by the krpano HTML5 viewer and makes there the background
transparent too. Overlapping itself is always possible in the HTML5 viewer.
auto - The default setting - automatically use the krpano HTML5 viewer.
With that setting, the krpano Flash viewer will be used by default on desktop
and the krpano HTML5 viewer only when the Flashplayer is not available
or when a mobile/tablet device will be used.
prefer - Prefer the usage of the krpano HTML5 viewer when possible.
With that setting, the krpano HTML5 viewer will be used by default, and the krpano Flash viewer
only when the system/browser is not HTML5-compatible.
fallback - Prefer the usage of the krpano Flash viewer when possible.
Use the krpano HTML5 viewer only as fallback when Flash is not available.
only - Only use the krpano HTML5 viewer - never use the krpano Flash viewer.
With that setting, the krpano HTML5 viewer will be used when possible.
When the system/browser is not HTML5-compatible, then an error message will be shown.
always - Always use the krpano HTML5 viewer, regardless if the system/browser will support it.
Warning - this setting should be only used for internal testing!
never - Never use the krpano HTML5 viewer, force using the krpano Flash viewer.
Settings extensions for the HTML5 viewer: (for testing)
The html5 setting can be extended with 'webgl' or 'css3d' to
define which rendering-technology should be prefered when both are available.
krpano.call("trace(krpano is ready...)");
Flashplayer Notes: This function requires the External Interface of the Flashplayer!
This means the call-back will work offline/locally only when the security settings of the Flashplayer were adjusted.
See here for more detatils - Local / Offline Usage.
There are some special variables, which can be used when embedding the viewer. These variables will not directly passed to the viewer - they have a special meaning for the embedding itself:
With the xml variable it's possible to specify the path / name
of the startup xml file.
When no xml variable will set then the 'default loading' will be used, 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 ...).
This variable allow to test the iPhone / iPad / Android layouts and images on Desktop.
iphone - simulate the iPhone/iPod
ipad - simulate the iPad
useragent - simulate the device depending on the User-Agent
androidmobile - simulate an Android Mobile device (Flash only)
android or androidtablet - simulate an Android Tablet device (Flash only)
For removing the pano viewer from the html page the removepano() function need to be used!
The removepano() function will remove all internally attached mouse-fixes (Flash) and all DOM elements and events (HTML5).
Note: The 'target-densitydpi=device-dpi' setting is known only by Android and can cause a warning on other browsers (iOS, Chrome, ...)
Don't use <iframe> elements to include the viewer - always include the viewer directly on the page.
When using iframes the page / viewport scaling inside the iframe can not be controlled and elements can appear in the wrong size.
The scaling which can happen in this case, can also affect the display quality.
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.