blob: e57d37c07788719084414a79f55195744466e8be (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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);
})
});
})();
|
