I want to change the gallery images to iframes to be able to display 360 degrees images.
If one of the preview iframes is selected, i want it to appear in big in the highlight frame.
I created a code which works just fine for usual images, but i want to use the 360 degree images instead. What do i have to change to make it work?
This is my JAVASCRIPT-Code for the images, i want the images to be swapped to iframes
function imageGallery(){
const highlight = document.querySelector('.gallery-highlight2');
const previews = document.querySelectorAll('.room-preview2 img');
previews.forEach(preview => {
preview.addEventListener("click", function(){
const smallSrc = this.src;
const bigSrc = smallSrc.replace("small", "big");
highlight.src = bigSrc;
previews.forEach(preview => preview.classList.remove("room-active2"));
preview.classList.add("room-active2");
});
});
}
imageGallery();
This is my HTML-Code:
<div class="col-md-8">
<div class="room-gallery2">
<img src="img/wohnung/wohnzimmer/wohnzimmer_1.jpg" class="gallery-highlight2" alt="Foto Groß">
<div class="room-preview2">
<img src="img/wohnung/wohnzimmer/wohnzimmer_1.jpg" class="room-active2" alt="Foto 1">
<img src="img/wohnung/wohnzimmer/wohnzimmer_2.jpg" alt="Foto 2">
<img src="img/wohnung/wohnzimmer/wohnzimmer_3.jpg" alt="Foto 3">
<img src="img/wohnung/wohnzimmer/wohnzimmer_4.jpg" alt="Foto 4">
</div>
</div>
</div>