Can anyone tell me how can I can the panorama image to a new one on button click without the page reload?
Photo sphere viewer that I am using is https://photo-sphere-viewer.js.org
var PSVUtils = PhotoSphereViewer.Utils,
fov = 70,
PSV = new PhotoSphereViewer({
panorama: 'images/vr-min.jpg', //want to change this image
container: 'photo360',
navbar: 'autorotate zoom download fullscreen',
caption: 'vr',
mousewheel: false,
size: 800,
time_anim: false,
gyroscope: true,
// webgl: PSVUtils.isWebGLSupported(),
move_speed: 3,
default_fov: fov + .01,
min_fov: fov,
max_fov: fov + .01,
markers: [
{
// html marker with custom style
id: 'text',
longitude: -1.4,
latitude: 0.12,
html: '<a href="#" style="color:#fff;" onclick="myFunction()"><img id="myimg" src="https://png.icons8.com/color/260/circled-play.png" width="30" height="30" /></a>',
anchor: 'bottom right',
style: {
maxWidth: '20px',
color: 'white',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: 'Watch this video for more details',
position: 'right',
height: '500px'
}
}
]
});
I don't know what I can do to replace this image. Thanks in advance.
PSV.setPanorama('new-pano.jpg', null, true);
will do the work for you.
suppose you have a marker with id "goto-pano", then,
PSV.on('select-marker', (marker) => {
if (marker.id === 'goto-pano') {
PSV.setPanorama('new-pano.jpg', null, true);
}
});
or you can do it in any other button click event you have.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.