如何在多个地方使用Photo Sphere Viewer插件?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在多个地方使用Photo Sphere Viewer插件?相关的知识,希望对你有一定的参考价值。
我正在使用Photo sphere插件。我想在多个地方使用该脚本。
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-6" role="main">
<section class="bs-docs-section">
<div id="photosphere"></div>
</section>
</div>
<div class="col-md-6" role="main">
<section class="bs-docs-section">
<div id="photosphere1"></div>
</section>
</div>
</div>
var PSV = new PhotoSphereViewer({
panorama: 'img/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
container: 'photosphere',
caption: 'Photo',
loading_img: 'img/photosphere-logo.gif',
navbar: 'autorotate zoom download caption fullscreen',
default_fov: 70,
mousewheel: true,
size: {
height: 500
}
});
var PSV = new PhotoSphereViewer({
panorama: 'img/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
container: 'photosphere1',
caption: 'Photo',
loading_img: 'img/photosphere-logo.gif',
navbar: 'autorotate zoom download caption fullscreen',
default_fov: 70,
mousewheel: true,
size: {
height: 500
}
});
而不是在一个脚本中添加容器:'photosphere',容器:'photosphere1',我想在多个地方使用它。我在下面提到了演示网址。
答案
使PhotoSphereViewer分离函数并将div id作为参数传递给该函数。使用div id(容器ID)调用此函数。
function psvDivFun(idname)
{
var PSV = new PhotoSphereViewer({
panorama: 'img/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
container: idname,
caption: 'Photo',
loading_img: 'img/photosphere-logo.gif',
navbar: 'autorotate zoom download caption fullscreen',
default_fov: 70,
mousewheel: true,
size: {
height: 500
}
});
}
psvDivFun('photosphere');
psvDivFun('photosphere1');
不要忘记将'idname'分配给容器。
container: idname,
以上是关于如何在多个地方使用Photo Sphere Viewer插件?的主要内容,如果未能解决你的问题,请参考以下文章
H5使用photo-sphere-viewer.js实现360°全景
React 纯 Javascript 上的 Photo Sphere Viewer
Vue 10分钟入门VR全景显示 基于photo-sphere-viewer