my_gallery/js/modal.js
2026-02-21 17:48:12 +01:00

47 lines
1.3 KiB
JavaScript

// ===============================
// MODALE (FOTO + VIDEO)
// ===============================
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modalClose');
function openModal(srcOriginal, srcPreview, photo) {
currentPhoto = photo;
const container = document.getElementById("modalMediaContainer");
container.innerHTML = "";
if (photo.mime_type.startsWith("video/")) {
const video = document.createElement("video");
video.src = srcOriginal;
video.controls = true;
video.autoplay = true;
video.style.maxWidth = "100%";
video.style.maxHeight = "100%";
container.appendChild(video);
} else {
const img = document.createElement("img");
img.src = srcPreview;
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
img.style.objectFit = "contain";
container.appendChild(img);
const full = new Image();
full.src = srcOriginal;
full.onload = () => {
img.src = srcOriginal;
};
}
modal.classList.add('open');
}
function closeModal() {
modal.classList.remove('open');
document.getElementById("modalMediaContainer").innerHTML = "";
}
modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});