I am using js-cloudimage-360-view.min.js to get a 360 view of images. I am getting the images perfectly, but I am unable to change the images by clicking a button.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = 'test' style="width: 400px; margin: 100px auto;">
<div
class="cloudimage-360"
data-folder="images/"
data-filename="{index}.jpg"
data-amount="22"
>
</div>
<div>
<button>Click</button>
</div>
<script src="main.js"></script>
<script src="js-cloudimage-360-view.min.js"></script>
</body>
</html>
main.js
const img_box = document.querySelector('.cloudimage-360')
const btn = document.querySelector('button')
btn.addEventListener('click',()=>{
img_box.dataset.folder = 'temp_images/'
img_box.dataset.filename = '{index}.png'
console.log(img_box.dataset)
})
console.log(img_box.dataset)
Here is the folder structure
Now in order for the 360 view to work, I have to specify the data-folder, data-filename and data-amount correctly inside the div tag and it is working fine. But I want to change the data-folder = 'temp_images/' and data-filename = '{index}.png' when the button is clicked to show a different set of images. I can see all the changes have been done correctly in the console, but the image remains the same. How can I get the images from different folders after clicking the button?
Here is the Github link
https://github.com/scaleflex/js-cloudimage-360-view
Here is a youtube tutorial
I suspect you'll need to destroy the component, change the attributes, and then init it again.
window.CI360.destroy();
img_box.dataset.folder = 'temp_images/';
img_box.dataset.filename = '{index}.png';
window.CI360.init();
If it still doesn't work, then it would probably be best to ask the author(s) directly.