PSV Home Demo

by Kirubel Girma

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<div id="photosphere">
  <div class="drawpop">
    <div class="roomsPano" sel="xb1">View 1</div>
    <div class="roomsPano" sel="xb2">View 2</div>
    <div class="roomsPano" sel="xb3">View 3</div>
    <div class="roomsPano" sel="xb4">View 4</div>
    <div class="roomsPano" sel="xb5">View 5</div>
    <div class="roomsPano" sel="xb6">View 6</div>
    <div class="roomsPano" sel="xb7">View 7</div>
    <div class="roomsPano" sel="xb8">View 8</div>
    <div class="roomsPano" sel="xb9">View 9</div>
    <div class="roomsPano" sel="xb10">View 10</div>
    <div class="roomsPano" sel="xb1">View 11</div>
    <div class="roomsPano" sel="xb12">View 12</div>
    <div class="roomsPano" sel="xb13">View 13</div>
    <div class="roomsPano" sel="xb14">View 14</div>
    <div class="roomsPano" sel="xb15">View 15</div>
    <div class="roomsPano" sel="xb16">View 16</div>
    <div class="roomsPano" sel="xb17">View 17</div>
    <div class="roomsPano" sel="xb18">View 18</div>
    <div class="roomsPano" sel="xb19">View 19</div>
    <div class="roomsPano" sel="xb20">View 20</div>
    <div class="roomsPano" sel="xb21">View 21</div>
    <div class="roomsPano" sel="xb22">View 22</div>
    <div class="roomsPano" sel="xb23">View 23</div>
    <div class="roomsPano" sel="xb24">View 24</div>
    <div class="roomsPano" sel="xb25">View 25</div>


  </div>
</div>

CSS

html,
body,
#photosphere {
  margin: 0;
  width: 100%;
  height: 100%;
}

#my-button {
  height: 3em;
  width: 5em;
  background: 'red';
  position: 'absolute';
  top: 2em;
  left: 2em;
}

.psv-button.psv-button--hover-scale.psv-autorotate-button {
  color: #FC7753;
}

.psv-navbar.psv-navbar--open {
  background: #023859;
}

.psv-button.psv-button--hover-scale.psv-autorotate-button {
  margin-left: 7.2em;
}

.drawpop {
  z-index: 999;
  position: absolute;
  height: 14em;
  background-color: #3A647E;
  width: 100%;
  bottom: 2.5em;
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}

.roomsPano {
  font-family: arial;
  color: white;
  cursor: pointer;
  flex-direction: column;
}

JavaScript

var popsv = new PhotoSphereViewer.Viewer({
  panorama: 'https://i.ibb.co/c6SzLxJ/IMG-20200806-121830-00-052-insp.jpg',
  container: 'photosphere',
  caption: 'Outsource Logistics: <b>Welcome</b>',
  loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
  navbar: [{
    id: 'my-button',
    content: '<img style="width: 8em" src="https://www.popcapacity.com/wp-content/uploads/2020/07/popcapacity-light-header-logo.png"/>',
    className: 'custom-button',
    onClick: () => {
      alert('Popcapacity is awesome!');
    }
  }, 'autorotate', 'zoom', 'caption'],
  defaultLat: 0,
  mousewheel: true,
  touchmoveTwoFingers: true,
});
popsv.startAutorotate('true');


var divs = document.querySelectorAll(".roomsPano");

var clickFunction = function(event) {
  var id = event.target.attributes['sel'].value;
  switch (id) {
    case 'xb1':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/c6SzLxJ/IMG-20200806-121830-00-052-insp.jpg');
      break;
    case 'xb2':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/DpF2SBX/IMG-20200806-121910-00-053-insp.jpg');
      break;
    case 'xb3':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/bdDZTqJ/IMG-20200806-121929-00-054-insp.jpg');
      break;
    case 'xb4':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/rspWFkV/IMG-20200806-121948-00-055-insp.jpg');
      break;
    case 'xb5':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/QFkL7PQ/IMG-20200806-122008-00-056-insp.jpg');
      break;
    case 'xb6':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/7X5839c/IMG-20200806-122036-00-057-insp.jpg');
      break;
    case 'xb7':
      popsv.startAutorotate('true');
      popsv.setPanorama('https://i.ibb.co/R0rpw81/IMG-20200806-122109-00-058-insp.jpg');
      break;
    case 'xb8':
      popsv.startAutorotate('true');
     ...