Added lightbox

1 files changed, 41 insertions, 0 deletions

diff --git a/content/lightbox.js b/content/lightbox.js
new file mode 100644
index 0000000..e57d37c
--- /dev/null
+++ b/content/lightbox.js
@@ -0,0 +1,41 @@
+(() => {
+    let currentIndex = 0;
+    const mainEl = document.querySelector("main");
+    const lightboxEl = document.querySelector(".c-lightbox");
+    const lightboxBgEl = document.querySelector(".c-lightbox__bg");
+    const lightboxCloseEl = document.querySelector(".c-lightbox__close");
+    const lightboxPrevEl = document.querySelector(".c-lightbox__prev");
+    const lightboxNextEl = document.querySelector(".c-lightbox__next");
+    const lightboxImgEl = document.querySelector(".c-lightbox__img");
+    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
+
+    const show = () => {
+        lightboxEl.classList.add("is-shown");
+    }
+
+    const hide = () => {
+        lightboxEl.classList.remove("is-shown");
+    }
+
+    const setIndex = (i) => {
+        currentIndex = i;
+        lightboxImgEl.src = figureEls[i].href;
+    };
+
+    lightboxBgEl.addEventListener("click", hide);
+    lightboxCloseEl.addEventListener("click", hide);
+    lightboxPrevEl.addEventListener("click", () => {
+        setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1);
+    });
+    lightboxNextEl.addEventListener("click", () => {
+        setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1);
+    });
+    
+    figureEls.forEach((figureEl, i) => {
+        figureEl.addEventListener("click", e => {
+            e.preventDefault();
+            show();
+            setIndex(i);
+        })
+    });
+})();