如何在多个地方使用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',我想在多个地方使用它。我在下面提到了演示网址。

https://rawgit.com/saravanasksp/Updated/master/index.html

答案

使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插件?的主要内容,如果未能解决你的问题,请参考以下文章

全景插件Photo sphere viewer使用

H5使用photo-sphere-viewer.js实现360°全景

React 纯 Javascript 上的 Photo Sphere Viewer

Vue 10分钟入门VR全景显示 基于photo-sphere-viewer

photo-sphere-viewer全景插件解决图片动态路径跨域问题

基于Three.js的360度全景--photo-sphere-viewer--简介