.gallery-fullscreen-slideshow-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery-fullscreen-slideshow-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 3s ease-in-out; /* longer fade */
}
.gallery-fullscreen-slideshow-item[data-active="true"] img {
opacity: 1;
z-index: 2; /* make sure active slide is on top */
}
document.addEventListener("DOMContentLoaded", function() {
const slides = document.querySelectorAll(".gallery-fullscreen-slideshow-item img");
slides.forEach(img => {
img.style.transition = "opacity 3s ease-in-out"; // match CSS duration
});
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === "data-active") {
const target = mutation.target.querySelector("img");
if (mutation.target.getAttribute("data-active") === "true") {
target.style.opacity = "1";
} else {
target.style.opacity = "0";
}
}
});
});
document.querySelectorAll(".gallery-fullscreen-slideshow-item").forEach(slide => {
observer.observe(slide, { attributes: true });
});
});
