嵌入到HTML版本1.19為將krpano查看器嵌入到HTML頁面embedpano.js需要使用腳本。這個腳本做許多重要的自動檢測和設(shè)置的東西,如設(shè)備/系統(tǒng)功能檢測(Flash或HTML5)并自動修復(fù)很多瀏覽器和系統(tǒng)相關(guān)問題和局限性(鼠標(biāo)滾輪的使用)。這使得嵌入krpano查看器容易和簡單的——一個腳本包含一行嵌入代碼就足夠了。文檔主題:
embedpano的功能。 js腳本
腳本包括
查看器嵌入
嵌入?yún)?shù)
啟動/嵌入變量
查看器刪除
指出了使用移動設(shè)備上(iPhone、iPad、Android)
例子
embedpano的功能。 js腳本
創(chuàng)建并將krpano查看器嵌入到HTML頁面。
自動檢查閃光或HTML5支持和自動加載適當(dāng)?shù)膋rpano查看器。
幾個瀏覽器,跨系統(tǒng)鼠標(biāo)滾輪修復(fù)(wheel-zooming page-scrolling Mac支持,觸摸板/ continues-wheel支持,車輪速度標(biāo)準(zhǔn)化)。
當(dāng)使用固定的幾個Flashplayer限制窗口模式=透明或不透明。
自動啟用flash播放器的使用全屏模式。
腳本也可以合并一起krpano HTML5瀏覽器腳本集成到一個腳本文件(例如“tour.js”)。當(dāng)使用krpano帕諾人或使VTOUR滴這將是默認(rèn)自動完成。
腳本包括嵌入腳本需要包含在html頁面的任何地方。
包括它只是這樣:<script src="embedpano.js"></script>
當(dāng)一個腳本文件將使用HTML5嵌入式查看器,就包括這個文件:<script src="tour.js"></script>查看器嵌入創(chuàng)建html頁面上的任何地方< div >觀眾應(yīng)該嵌入元素,給它一個獨特的id通過css樣式名稱和定義它的大小:<div id="pano" style="width:100%; height:100%;"></div>
在定義了< div >元素,創(chuàng)建一個<腳本>元素嵌入腳本代碼。的embedpano.js腳本提供了一個embedpano()查看器嵌入函數(shù):

embedpano({...embedding parameters...});
embedpano()函數(shù)需要的對象嵌入?yún)?shù)。

完整的例子:<script src="embedpano.js"></script><div id="pano" style="width:600px; height:400px;"></div><script> embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"});</script>
嵌入?yún)?shù)embedpano()函數(shù)只需要一個Javascript對象作為參數(shù)。這個對象是用來傳遞所有參數(shù)(隨機(jī))通過使用parametername:價值對。(除了幾乎所有的參數(shù)目標(biāo)參數(shù))是可選的,當(dāng)他們沒有定義,將使用默認(rèn)值。的參數(shù)對象提供了以下設(shè)置:

swf:"krpano.swf"
名稱和路徑查看器”。 swf文件(相對于html文件)。
默認(rèn)值是“krpano.swf”。

js:"krpano.js"
名稱和路徑krpano HTML5瀏覽器”。 js文件(相對于html文件)。
默認(rèn)情況下相同的路徑和文件名設(shè)置的基礎(chǔ)主權(quán)財富基金設(shè)置將被使用,只是與“。 js的擴(kuò)展,而不是. swf。
這個設(shè)置將被忽略當(dāng)HTML5瀏覽器嵌入到嵌入腳本文件。

xml:"krpano.xml"
啟動xml文件名稱和路徑(相對于html文件)。
默認(rèn)名稱相同的基本文件名的swf文件將使用(例如krpano。 xml krpano.swf)。

target:"...pano-div-id..."
瀏覽器的html元素的id應(yīng)該嵌入。
將會有一個“警報() 當(dāng)沒有目標(biāo)的錯誤。

id:"krpanoSWFObject"
內(nèi)部觀察者對象的id。
這將是觀眾通過連接的對象javascript接口。
默認(rèn)id“krpanoSWFObject”。
重要的是,每個觀眾都有一個惟一的id !
當(dāng)已經(jīng)存在一個對象具有給定id,然后嵌入腳本將自動添加數(shù)字id,直到年底是獨一無二的。

bgcolor:"#000000"
觀眾的背景顏色(顏色在html格式)。
默認(rèn)值是“000000 #”(=黑)。

wmode:"..."
設(shè)置flash播放器窗口模式 設(shè)置。
可能的設(shè)置:
窗口——flash播放器默認(rèn)情況下,系統(tǒng)支持和性能之間的妥協(xié)。注意:在許多系統(tǒng)和瀏覽器,html元素不能重疊的flash播放器模式!看到這窗口模式鏈接的細(xì)節(jié)。
不透明的——允許其他html元素重疊Flashplayer(慢的渲染性能)。
透明的——使flash播放器背景透明,允許看到html元素flash播放器后面,此外還允許其他html元素重疊flash播放器(更慢的渲染性能)。
直接——最佳性能,硬件加速表示,沒有html重疊在許多系統(tǒng)和瀏覽器(這通常是最快的方式,但在不兼容或舊系統(tǒng)/瀏覽器這可能會導(dǎo)致經(jīng)濟(jì)放緩)。

krpano將使用窗口模式=直接默認(rèn)情況下,除了鉻-窗口模式=窗口將使用默認(rèn)(窗口大小調(diào)整期間更好的性能和黑色)。
HTML5指出:窗口模式通常是一個Flash-only設(shè)置,但窗口模式=透明也將評估krpano HTML5的觀眾,使背景透明的。 在HTML5瀏覽器重疊本身總是可能的。

html5:"auto"
設(shè)置krpano HTML5瀏覽器使用。
可能的設(shè)置:
汽車——默認(rèn)設(shè)置自動使用HTML5 krpano查看器。
設(shè)置,krpano Flash查看器將使用默認(rèn)桌面和krpano HTML5觀眾只有當(dāng)Flashplayer不可用或者當(dāng)手機(jī)/平板電腦將被使用。
更喜歡——喜歡krpano HTML5查看器的使用。
設(shè)置,krpano HTML5查看器將使用默認(rèn)情況下,和krpano Flash查看器只有當(dāng)系統(tǒng)/瀏覽器不是方能盡享。
回退——喜歡krpano Flash查看器的使用。使用krpano HTML5瀏覽器后退閃時不可用。
只有——只使用HTML5 krpano查看器——從不使用krpano Flash查看器。
設(shè)置,krpano HTML5查看器將在可能的情況下使用。當(dāng)系統(tǒng)/瀏覽器不是方能盡享,那么將顯示一條錯誤消息。
總是總是使用HTML5 krpano查看器,無論系統(tǒng)/瀏覽器是否支持它。警告——這個設(shè)置應(yīng)該只用于內(nèi)部測試!
從來沒有——從不使用HTML5 krpano查看器,強(qiáng)制使用krpano Flash觀眾。

設(shè)置為HTML5瀏覽器擴(kuò)展:(測試)
的html5設(shè)置可以擴(kuò)展“webgl”或“css3d”來定義哪些繪制技術(shù)時應(yīng)優(yōu)先都可用。

使用例子:html5 =“汽車+ css3d”,html5 = "喜歡+ webgl”,……
當(dāng)可用默認(rèn)WebGL將首選。

flash:""
設(shè)置krpano Flash瀏覽器使用。
這是一個基本一樣html5設(shè)置,逆。它可以用于更好的url,例如通過使用flash =喜歡而不是html5 =后退。
當(dāng)閃光設(shè)置將被設(shè)置,它將映射到一個html5設(shè)置和覆蓋它。
可能的設(shè)置:
沒有設(shè)置,使用html5設(shè)置。
汽車- - - - - -一樣html5 =汽車。
更喜歡——喜歡krpano Flash查看器的使用。
使用HTML5 krpano觀眾只有當(dāng)沒有flash播放器和系統(tǒng)/瀏覽器方能盡享。
這個設(shè)置將映射到html5 =后退。
回退——喜歡krpano HTML5查看器的使用。使用krpano Flash觀眾只是后備當(dāng)HTML5是不可用的。
這個設(shè)置將映射到html5 =喜歡。
只有——只使用krpano Flash查看器——從不使用krpano HTML5查看器。
設(shè)置,krpano Flash查看器將在可能的情況下使用。當(dāng)沒有flash播放器,那么將顯示一條錯誤消息。
這個設(shè)置將映射到html5 =沒有。
從來沒有——從不使用krpano Flash瀏覽器,只使用krpano Flash查看器。
這個設(shè)置將映射到html5 =只。

vars:{...}
通過與krpano Javascript對象變量:值對。
這可用于設(shè)置krpano啟動變量并設(shè)置任何其他krpano變量或設(shè)置。
將被設(shè)置的變量后xml文件加載和解析。
所以這些變量可以用來添加新設(shè)置或覆蓋設(shè)置已經(jīng)在xml中定義的。
例子:var settings = {};settings["onstart"] = "trace('on start...')";settings["view.hlookat"] = 30;embedpano({xml:"pano.xml", target:"pano", vars:settings});

initvars:{...}
通過與krpano Javascript對象變量:值對。
這基本上是一樣的增值設(shè)置,但是這些變量將被設(shè)置之前xml文件將被加載和解析。
的主要使用此設(shè)置將變量可以設(shè)置自定義路徑作為占位符里面url路徑在xml文件中和/或設(shè)置變量,可以使用xml-if-checks為<包括>元素。
例子:embedpano({..., initvars:{mypath:"./panos1/"} });XML:url="%$mypath%image.jpg"
能夠通過initvars變量通過http查詢直接在html文件的url語法需要使用:tour.html?initvars.variable=value

basepath:...
設(shè)置一個自定義的基本路徑解決路徑相對于krpano swf文件。
可用于Flash和HTML5調(diào)整相對路徑的xml。

consolelog:false
一個布爾設(shè)置定義如果krpano日志/跟蹤消息應(yīng)該發(fā)送到瀏覽器的Javascript控制臺。

mwheel:true
一個布爾設(shè)置來控制鼠標(biāo)滾輪的使用。
當(dāng)設(shè)置為真正的(默認(rèn)),那么可以使用鼠標(biāo)滾輪事件將被捕獲并查看器(例如縮放)。
當(dāng)設(shè)置為假,那么任何鼠標(biāo)滾輪的使用將被忽略,瀏覽器將其默認(rèn)鼠標(biāo)滾輪處理(通常是滾動網(wǎng)頁)。

mobilescale:0.5
默認(rèn)情況下所有krpano內(nèi)容0.5將擴(kuò)大在移動設(shè)備上。
禁用擴(kuò)展,設(shè)置mobilescale設(shè)置為1.0。
這可以用于實現(xiàn)響應(yīng)設(shè)計。
參見xmlstagescale設(shè)置。

fakedevice:""
假的krpano設(shè)備檢測設(shè)置。
可以設(shè)置:“移動”,“平板電腦”,“桌面”。
注意:這個設(shè)置應(yīng)該僅用于內(nèi)部測試,從未發(fā)布!

onready:...Javascript-Function...
的onready設(shè)置可用于設(shè)置call-back-function完成通知當(dāng)嵌入和krpano查看器準(zhǔn)備使用。
給定的函數(shù)將被調(diào)用krpano javascript接口對象。
例子:embedpano({target:"krpanoDIV", onready:krpanoReady});function krpanoReady(krpano){ krpano.call("trace(krpano is ready...)");}
Flashplayer指出:這個函數(shù)需要的外部接口flash播放器!這意味著回調(diào)將本地離線工作/只有當(dāng)flash播放器的安全設(shè)置進(jìn)行調(diào)整。在這里看到更多detatils -本地/離線使用。

onerror:...Javascript-Function...
的onerror設(shè)置可用于設(shè)置一個自定義embedding-error-handling功能。
給定的函數(shù)將調(diào)用一個錯誤消息字符串作為參數(shù)。

passQueryParameters:false
一個布爾值設(shè)置。 當(dāng)設(shè)置為真正的從html url,所有查詢參數(shù)作為變量傳遞給觀眾。
當(dāng)啟用時,它也可以通過html5,閃光,窗口模式,mobilescale,fakedevice和initvars設(shè)置直接在html的url。

使用的例子:tour.html?html5=only&startscene=scene2&initvars.design=flat
啟動/嵌入變量有一些特殊的變量,它可以使用嵌入觀眾。 這些變量并不會直接傳遞給觀眾,他們有一個嵌入本身特殊的意義:

xml
與xml變量可以指定路徑/名稱啟動的xml文件。
當(dāng)沒有xml變量將將使用“默認(rèn)加載”,試圖加載一個xml文件具有相同的“:”swf文件(例如krpano.swf?krpano。 xml或pano.swf?pano.xml或tour.swf?之旅。 xml等等……)。

simulatedevice
這個變量允許測試iPhone / iPad /安卓桌面布局和圖片。可能的設(shè)置:
iphone-模擬iPhone / iPod
ipad——模擬iPad
useragent——模擬設(shè)備根據(jù)用戶代理
androidmobile模擬一個Android的移動設(shè)備(Flash)
安卓或androidtablet模擬一個Android平板電腦(Flash)
的krpano iPhone / iPad模擬器(包括在查看器中下載包)一起使用,設(shè)置一個iPhone / iPad的背景和一個原始大小的觀察窗。

查看器刪除為消除帕諾人觀眾從html頁面removepano()函數(shù)需要使用!removepano()函數(shù)將刪除所有內(nèi)部附加mouse-fixes(Flash)和所有DOM元素和事件(HTML5)。

removepano(id);
removepano()函數(shù)需要調(diào)用與獨特id查看器的對象。
例子:embedpano({target:"panoDIV", id:"pano1"});...removepano("pano1");
指出在移動設(shè)備上使用(iPhone、iPad、Android…)有一些設(shè)置可用的html文件,應(yīng)該得到尊重,當(dāng)試圖讓所有設(shè)備優(yōu)化結(jié)果:

總是使用HMTL5 doctype html文件:<!DOCTYPE html>
正確的1:1 pixel-mapped顯示,任何類型的自動頁面/視窗擴(kuò)展應(yīng)該禁用。這可以通過使用<元>視窗設(shè)置html <頭>元素:<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />注:“target-densitydpi = device-dpi”設(shè)置是只知道Android和可能導(dǎo)致一個警告在其他瀏覽器(iOS,Chrome,…)在Javascript控制臺——在這種情況下可以忽略這個警告。
不要使用< iframe >元素包括觀眾——總是包括觀眾直接在頁面上。當(dāng)使用iframes iframe內(nèi)的頁面/窗口縮放不能控制和元素可以出現(xiàn)在一個錯誤的大小。擴(kuò)展可以發(fā)生在這種情況下,還會影響顯示質(zhì)量。
例子1。 最簡單的用法:<script> embedpano({target:"pano"}); </script>這里將使用所有缺省值:“krpano。 主權(quán)財富基金”的名字flash文件查看器,“krpano。 xml”作為默認(rèn)的xml文件,“krpanoSWFObject“觀眾id和100%的大小。只有帕諾人的目標(biāo)應(yīng)該是嵌入式必須設(shè)置。2。 簡單使用但更多的設(shè)置:<script> embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano"});</script>這里的路徑將swf和xml文件。3。 喜歡HTML5查看器:<script> embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", html5:"prefer"});</script>4。 設(shè)置不透明的窗口模式設(shè)置:<script> embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", wmode:"opaque"});</script>5。 選擇性使用HTML5——喜歡只在Android和HTML5 IE10觸摸設(shè)備上:<script> function selecthtml5usage() { // check for Android: if( navigator.userAgent.indexOf("Android") >= 0 ) return "prefer" // check for IE10 with multi-touch display: if( (navigator.msMaxTouchPoints|0) > 1 ) return "prefer" // for all other cases use html5=auto: return "auto"; } embedpano({xml:"pano.xml", target:"pano", html5:selecthtml5usage()});</script>