TechQA.

Multiple viewers on one page showing broken panorama

30 views Asked by At

I am not sure if this is a bug or an issue with my code but I am having trouble understand this error.

This demo URL has about 19 viewers: https://jsfiddle.net/mtran21/q87gt1es/16

If you click on any modal of the first row, it shows this enter image description here

If you click on any of them below that then they are working just fine.

So I removed some of them, I keep only the first 2 rows of the modals. Then they are working just fine and here it the demo for only about 6 modals https://jsfiddle.net/mtran21/nc9Ltzjm/7/

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131155"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 101</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131155 -->
      <div class="modal fade" id="131155" tabindex="-1" role="dialog" aria-labelledby="131155" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131155">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 101</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131155" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131155 -->
    </div>
    <script type="text/javascript">
      const viewer131155 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131155',
        panorama: 'https://images.unsplash.com/photo-1552288092-76e7d732366c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2171&q=80',
        caption: 'ASB 101',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131155").click(function() {
          $("#131155").modal("show");
        });
        $("#close131155").click(function() {
          $("#131155").modal("hide");
          viewer131155.destroy();
        });
      });

    </script>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131156"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 103</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131156 -->
      <div class="modal fade" id="131156" tabindex="-1" role="dialog" aria-labelledby="131156" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131156">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 103</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131156" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131156 -->
    </div>
    <script type="text/javascript">
      const viewer131156 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131156',
        panorama: 'https://images.unsplash.com/photo-1584184087921-b397a56c13c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1971&q=80',
        caption: 'ASB 103',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131156").click(function() {
          $("#131156").modal("show");
        });
        $("#close131156").click(function() {
          $("#131156").modal("hide");
        });
      });

    </script>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131158"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 104</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131158 -->
      <div class="modal fade" id="131158" tabindex="-1" role="dialog" aria-labelledby="131158" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131158">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 104</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131158" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131158 -->
    </div>
    <script type="text/javascript">
      const viewer131158 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131158',
        panorama: 'https://images.unsplash.com/photo-1617186929168-dd54edc6a3a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2045&q=80',
        caption: 'ASB 104',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131158").click(function() {
          $("#131158").modal("show");
        });
        $("#close131158").click(function() {
          $("#131158").modal("hide");
        });
      });

    </script>
    <div class="clearfix"></div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131160"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 105</h3>

          <p><strong>Capacity: 40</strong></p>
        </div>
      </div>

      <!-- Modal:131160 -->
      <div class="modal fade" id="131160" tabindex="-1" role="dialog" aria-labelledby="131160" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131160">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 105</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131160" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 40</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131160 -->
    </div>
    <script type="text/javascript">
      const viewer131160 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131160',
        panorama: 'https://images.unsplash.com/photo-1596988574375-6b01bfa312a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1884&q=80',
        caption: 'ASB 105',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131160").click(function() {
          $("#131160").modal("show");
        });
        $("#close131160").click(function() {
          $("#131160").modal("hide");
        });
      });

    </script>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131162"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 201</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131162 -->
      <div class="modal fade" id="131162" tabindex="-1" role="dialog" aria-labelledby="131162" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131162">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 201</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131162" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131162 -->
    </div>
    <script type="text/javascript">
      const viewer131162 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131162',
        panorama: 'https://images.unsplash.com/photo-1597234496463-d0a82e73b3a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1979&q=80',
        caption: 'ASB 201',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131162").click(function() {
          $("#131162").modal("show");
        });
        $("#close131162").click(function() {
          $("#131162").modal("hide");
        });
      });

    </script>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="#" class="thumb" id="thumb131165"><img src="https://placehold.co/200x150" alt=""></a>
        <div class="caption">
          <h3>ASB 202</h3>

          <p><strong>Capacity: 48</strong></p>
        </div>
      </div>

      <!-- Modal:131165 -->
      <div class="modal fade" id="131165" tabindex="-1" role="dialog" aria-labelledby="131165" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close131165">&times;</button>
              <h4 class="modal-title" id="myModalLabel">ASB 202</h4>
            </div>
            <div class="modal-body">
              <div class="panorama-margin" id="photosphere131165" style="width: 100%; height: 50vh;"></div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-4 room-info">
                  <div class="info-cell">
                    <p class="large">Capacity: 48</p>
                  </div>
                </div>
                <div class="col-md-4 room-info">
                  <a class="btn btn-default btn-wide" href="#?ID=151168">Classroom Technology</a>
                </div>
                <div class="col-md-4 room-info"><a href="#" class="btn btn-default btn-wide">Schedule</a></div>
              </div> <!-- end footer row -->
            </div> <!-- end modal-footer -->
          </div>
        </div>
      </div>
      <!-- End Modal: 131165 -->
    </div>
    <script type="text/javascript">
      const viewer131165 = new PhotoSphereViewer.Viewer({
        container: 'photosphere131165',
        panorama: 'https://images.unsplash.com/photo-1604168612704-edf7120be425?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2066&q=80',
        caption: 'ASB 202',
        navbar: [
          'zoom',
          'move',
          'caption',
          'fullscreen',
        ],
      });
      $(document).ready(function() {
        $("#thumb131165").click(function() {
          $("#131165").modal("show");
        });
        $("#close131165").click(function() {
          $("#131165").modal("hide");
        });
      });

    </script>
  </div>
</div>

This bug is on Chrome and Edge. So far it is working with Firefox and Safari.

I hope you could help me find out what the problem and how to fix it.

Thank you

javascript three.js photosphere photosphereviewer
Original Q&A
0

There are 0 answers

Related Questions in JAVASCRIPT

Related Questions in THREE.JS

Related Questions in PHOTOSPHERE

Related Questions in PHOTOSPHEREVIEWER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions