Wie funktioniert Photo Sphere Viewer Plugin an mehreren Orten?

Question

Ich benutze Foto Sphäre Plugin. Ich möchte das Skript an mehreren Stellen verwenden.

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

Statt Behälter hinzuzufügen: 'Photosphäre', Behälter: 'photosphere1', innerhalb eines Skript möchte ich an mehreren Stellen verwenden. Ich habe unten die Demo-URL erwähnt.

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

Answer 1

PhotoSphereViewer Make-Funktion zu trennen und die div id als Argument für diese Funktion übergeben. Rufen Sie diese Funktion mit der div-ID (Container-ID) auf, wo immer Sie möchten.

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

Vergessen Sie nicht, den 'ID-Namen' dem Container zuzuweisen.

container: idname,