summaryrefslogtreecommitdiffstats
path: root/content/lightbox.js
diff options
context:
space:
mode:
Diffstat (limited to 'content/lightbox.js')
-rw-r--r--content/lightbox.js18
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);