diff options
Diffstat (limited to 'content/lightbox.js')
-rw-r--r-- | content/lightbox.js | 41 |
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 @@ | |||
1 | (() => { | ||
2 | let currentIndex = 0; | ||
3 | const mainEl = document.querySelector("main"); | ||
4 | const lightboxEl = document.querySelector(".c-lightbox"); | ||
5 | const lightboxBgEl = document.querySelector(".c-lightbox__bg"); | ||
6 | const lightboxCloseEl = document.querySelector(".c-lightbox__close"); | ||
7 | const lightboxPrevEl = document.querySelector(".c-lightbox__prev"); | ||
8 | const lightboxNextEl = document.querySelector(".c-lightbox__next"); | ||
9 | const lightboxImgEl = document.querySelector(".c-lightbox__img"); | ||
10 | const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); | ||
11 | |||
12 | const show = () => { | ||
13 | lightboxEl.classList.add("is-shown"); | ||
14 | } | ||
15 | |||
16 | const hide = () => { | ||
17 | lightboxEl.classList.remove("is-shown"); | ||
18 | } | ||
19 | |||
20 | const setIndex = (i) => { | ||
21 | currentIndex = i; | ||
22 | lightboxImgEl.src = figureEls[i].href; | ||
23 | }; | ||
24 | |||
25 | lightboxBgEl.addEventListener("click", hide); | ||
26 | lightboxCloseEl.addEventListener("click", hide); | ||
27 | lightboxPrevEl.addEventListener("click", () => { | ||
28 | setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1); | ||
29 | }); | ||
30 | lightboxNextEl.addEventListener("click", () => { | ||
31 | setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1); | ||
32 | }); | ||
33 | |||
34 | figureEls.forEach((figureEl, i) => { | ||
35 | figureEl.addEventListener("click", e => { | ||
36 | e.preventDefault(); | ||
37 | show(); | ||
38 | setIndex(i); | ||
39 | }) | ||
40 | }); | ||
41 | })(); | ||