2025-02-15 10:19:38 +01:00
|
|
|
|
2025-03-01 16:38:05 +01:00
|
|
|
|
2025-02-15 10:19:38 +01:00
|
|
|
const dialog = document.querySelector("dialog");
|
|
|
|
const closeDialog = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
console.log("close")
|
|
|
|
dialog.close();
|
|
|
|
document.body.removeEventListener("click", closeDialog);
|
|
|
|
}
|
|
|
|
const showLightbox = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
const img = dialog.querySelector("img");
|
|
|
|
img.src = e.currentTarget.src;
|
|
|
|
img.alt = e.currentTarget.alt;
|
|
|
|
dialog.querySelector("p").textContent = e.currentTarget.alt;
|
|
|
|
dialog.showModal();
|
|
|
|
document.body.addEventListener("click", closeDialog, false);
|
|
|
|
}
|
|
|
|
document.querySelectorAll("article img").forEach((img) => {
|
|
|
|
console.log(img);
|
|
|
|
img.addEventListener("click", showLightbox);
|
2025-02-16 13:52:06 +01:00
|
|
|
})
|
|
|
|
|