diff options
author | Volpeon <git@volpeon.ink> | 2022-06-18 08:47:28 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-06-18 08:47:28 +0200 |
commit | 7050b8141eae25a0cdc394fd195e66dd9af29ad7 (patch) | |
tree | 5ff32ef829157143f6f47278d114900b23f7616c /content/lightbox.js | |
parent | Use dvh unit to make exhibit component fill viewport (diff) | |
download | volpeon.ink-7050b8141eae25a0cdc394fd195e66dd9af29ad7.tar.gz volpeon.ink-7050b8141eae25a0cdc394fd195e66dd9af29ad7.tar.bz2 volpeon.ink-7050b8141eae25a0cdc394fd195e66dd9af29ad7.zip |
Improved exhibit
Diffstat (limited to 'content/lightbox.js')
-rw-r--r-- | content/lightbox.js | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/content/lightbox.js b/content/lightbox.js index 66facd6..e4a2c29 100644 --- a/content/lightbox.js +++ b/content/lightbox.js | |||
@@ -27,13 +27,14 @@ | |||
27 | } | 27 | } |
28 | 28 | ||
29 | const setIndex = (i) => { | 29 | const setIndex = (i) => { |
30 | if (i < 0 || i >= thumbnailEls.length) { | 30 | if (i < 0 || i >= images.length) { |
31 | return; | 31 | return; |
32 | } | 32 | } |
33 | thumbnailEls[currentIndex].classList.remove("is-selected"); | 33 | images[currentIndex].thumbnailEl.classList.remove("is-selected"); |
34 | currentIndex = i; | 34 | currentIndex = i; |
35 | lightboxImgEl.src = figureEls[i].firstElementChild.href; | 35 | lightboxImgEl.src = figureEls[i].firstElementChild.href; |
36 | thumbnailEls[i].classList.add("is-selected"); | 36 | lightboxImgEl.alt = images[currentIndex].description; |
37 | images[i].thumbnailEl.classList.add("is-selected"); | ||
37 | }; | 38 | }; |
38 | 39 | ||
39 | const prev = () => { | 40 | const prev = () => { |
@@ -48,7 +49,7 @@ | |||
48 | lightboxPrevEl.addEventListener("click", prev); | 49 | lightboxPrevEl.addEventListener("click", prev); |
49 | lightboxNextEl.addEventListener("click", next); | 50 | lightboxNextEl.addEventListener("click", next); |
50 | 51 | ||
51 | const thumbnailEls = figureEls.map((figureEl, i) => { | 52 | const images = figureEls.map((figureEl, i) => { |
52 | const go = e => { | 53 | const go = e => { |
53 | e.preventDefault(); | 54 | e.preventDefault(); |
54 | show(); | 55 | show(); |
@@ -72,7 +73,6 @@ | |||
72 | } | 73 | } |
73 | 74 | ||
74 | anchorEl.addEventListener("click", go); | 75 | anchorEl.addEventListener("click", go); |
75 | |||
76 | const thumbnailButtonEl = document.createElement("button"); | 76 | const thumbnailButtonEl = document.createElement("button"); |
77 | const thumbnailImgEl = document.createElement("img"); | 77 | const thumbnailImgEl = document.createElement("img"); |
78 | 78 | ||
@@ -89,7 +89,13 @@ | |||
89 | 89 | ||
90 | lightboxFooterEl.appendChild(thumbnailButtonEl); | 90 | lightboxFooterEl.appendChild(thumbnailButtonEl); |
91 | 91 | ||
92 | return thumbnailButtonEl; | 92 | const captionEl = figureEl.querySelector("figcaption"); |
93 | const description = captionEl?.innerHTML ?? ""; | ||
94 | |||
95 | return { | ||
96 | thumbnailEl: thumbnailButtonEl, | ||
97 | description, | ||
98 | }; | ||
93 | }); | 99 | }); |
94 | 100 | ||
95 | setIndex(0); | 101 | setIndex(0); |