更改变量属性 onclick javascript

Question

I'm trying to change an image URL contained within a javascript object using an onclick element so that the image can be swapped out for a different one - it's a panorama image so not a simple image change unfortunately!

The object code is:

<div id="img-251" style="width:100%;max-width:800px;height:80vh;max-height:600px;"></div>
</div>
<script>
var viewer251 = new PhotoSphereViewer({
 container: 'img-251',
 touchmove_two_fingers: false,
 time_anim: false,
 anim_speed: '1rpm',
 caption: 'Bedroom',
 panorama: 'http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0000.jpg',
navbar: [
 'autorotate',
 'zoom',
 'caption',
 {title: 'Normal Size',className: 'sps-icon',content: '&#xe801;',onClick: function() {document.getElementById('spscontent-251').setAttribute("style","padding:10px");document.getElementById('img-251').setAttribute("style","width:100%;max-width:800px;height:80vh;max-height:600px;");viewer251.resize({width:100,height:80});}},
 {title: 'Full Size',className: 'sps-icon',content: '&#xe800;',onClick: function() {document.getElementById('spscontent-251').setAttribute("style","position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 700;");document.getElementById('img-251').setAttribute("style","width:100%;height:100%");document.getElementById('spscontent-251').setAttribute("style","max-width:100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 99999;margin: 0;width: 100%;");viewer251.resize({width:100,height:80});}}
],
lang: {
 autorotate: 'Automatic rotation',
 zoom: 'Zoom',
 zoomOut: 'Zoom Out',
 zoomIn: 'Zoom In',
 two_fingers: ['Use two fingers to navigate']
}
});

And I'm attempting to do change the image with this code using an image onclick. I've tried various ways of writing things eg with and without viewer251 or PhotoSphereViewer variable names...

<img src="http://pallighting.com.au/wp-content/uploads/2020/06/logo.png"  onClick="viewer251.PhotoSphereViewer.panorama: 'http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0001.jpg'">

No luck with this method, any help would be greatly appreciated!

Answer 1

You can use the setPanorama method

<img src="http://pallighting.com.au/wp-content/uploads/2020/06/logo.png"  
      onClick="viewer.setPanorama('http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0001.jpg')">