Estoy usando js-cloudimage-360-view.min.js para obtener una vista de 360° de las imágenes. Obtengo las imágenes perfectamente, pero no puedo cambiar las imágenes haciendo clic en un botón.
índice.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>principal.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)Aquí está la estructura de carpetas.
Ahora, para que funcione la vista 360, tengo que especificar la carpeta de datos, el nombre del archivo de datos y la cantidad de datos correctamente dentro de la etiqueta div y funciona bien. Pero quiero cambiar data-folder = 'temp_images/' y data-filename = '{index}.png' cuando se hace clic en el botón para mostrar un conjunto diferente de imágenes. Puedo ver que todos los cambios se han realizado correctamente en la consola, pero la imagen sigue siendo la misma. ¿Cómo puedo obtener las imágenes de diferentes carpetas después de hacer clic en el botón?
Aquí está el enlace Github
https://github.com/scaleflex/js-cloudimage-360-view
aqui hay un tutorial de youtube
Sospecho que necesitará destroy el componente, cambiar los atributos y luego init nuevamente.
window.CI360.destroy(); img_box.dataset.folder = 'temp_images/'; img_box.dataset.filename = '{index}.png'; window.CI360.init();Si aún no funciona, probablemente sea mejor preguntarle directamente al autor o autores .