How to use Photo Sphere Viewer plugin in multiple places?

Question

I am using photo sphere plugin . I want to use the script in multiple places.

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

Instead of adding container: 'photosphere', container: 'photosphere1', within one script I want to use in multiple places. I have mentioned below the demo url.

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

Answer 1

Make PhotoSphereViewer to separate function and pass the div id as argument to that function. Call the this function where ever you want with the div id(container 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');

don't forget to assign the 'idname' to container.

container: idname,