https://www.ibabbleon.com/dist/vendors/lumos/build/lumos.js

1document.addEventListener('DOMContentLoaded', () => {
2    document.body.appendChild(document.getElementById("lumos-template").content);
3    const lumosContainer = document.getElementById("lumos-container"), lumosImage = document.getElementById("lumos-image"), lumosCaption = document.getElementById("lumos-caption"), images = document.querySelectorAll('[data-action="lumos"]'), animationDuration = 250;
4    function hide() {
5        isVisible() && (lumosContainer.classList.add("hidden"), setTimeout(() => {
6            lumosContainer.classList.remove("visible");
7            lumosImage.src = "";
8            if (lumosCaption !== null) {
9                lumosCaption.textContent = "";
10            }
11            lumosContainer.classList.remove("hidden");
12        }, animationDuration));
13    }
14    function isVisible() {
15        return lumosContainer.classList.contains("visible");
16    }
17    window.addEventListener("keyup", (e) => {
18        "Escape" === e.key && hide();
19    });
20    images.forEach((image) => {
21        image.addEventListener("click", () => {
22            lumosImage.src = void 0 === image.dataset.lumosSrc ? image.src : image.dataset.lumosSrc;
23            if (lumosCaption !== null) {
24                lumosCaption.textContent = image.dataset.lumosCaption;
25            }
26            isVisible() || (lumosContainer.classList.remove("hidden"), lumosContainer.classList.add("visible"));
27        });
28    });
29    lumosContainer.addEventListener("click", hide);
30});