Erase previous contents from PhotoSphereViewer

JavaScript
1

I am using the PhotoSphereViewer to display 360 picture. See here https://www.corobori.com/sos/TestImage.html

I have got a list of pictures

<ul>
        <li><a href="javascript:LoadPicture('tj110cok-360-panorama-kitchen.jpeg');">See tj110cok-360-panorama-kitchen.jpeg </a></li>
        <li><a href="javascript:LoadPicture('ix150lrm-360-panorama-interior-restaurant.jpeg');">See ix150lrm-360-panorama-interior-restaurant </a></li>

    </ul>

That I would like to display in the div

<div id="viewer"></div>

Things are working fine but when I am clicking on the 2nd picture it doesn’t replace the previous one but add itself below. I tried cleaning up the innerHTML but it didn’t work.

Any idea ?

<script>

        function LoadPicture(pic) {
            /* document.getElementById(viewer).innerHTML = "";*/

            var viewer = new PhotoSphereViewer.Viewer({
                container: document.querySelector('#viewer'),
                panorama: pic
            });
        }

    </script>
2

Hi there Corobori,

bearing in mind that javascript is not my forté
this may solve your immediate problem…

<script>
function LoadPicture(pic) {
   var element = document.querySelector('#viewer');
         element.innerHTML = '';
   var viewer = new PhotoSphereViewer.Viewer({
      container: element,
      panorama: pic
    });
 }
</script>

coothead

1 Like
3

But enought to solve this issue, works fine. Thank you coothead

4

No problem, you’re very welcome. :winky:

coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.