Photo Sphere Viewerのプラグインを複数の場所で使用する方法は？

Question

Photo Sphere Pluginを使用しています。私は複数の場所でスクリプトを使いたいです。

<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 
    } 
    }); 

代わりのコンテナの追加： '光球'、コンテナ： 'photosphere1'、 1内のスクリプトは私が複数の場所で使用したいが。私はデモURLの下で言及しました。

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

Answer 1

機能を分離し、その関数の引数としてのdivのidを渡すためにPhotoSphereViewerしてください。この関数を、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,