Improved exhibit

9 files changed, 31 insertions, 19 deletions

diff --git a/content/art/doodles/2021-lazy-firefox/index.md b/content/art/doodles/2021-lazy-firefox/index.md
index 4e91afb..d7d47e1 100644
--- a/content/art/doodles/2021-lazy-firefox/index.md
+++ b/content/art/doodles/2021-lazy-firefox/index.md
@@ -6,6 +6,6 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - firefox_lazy.png
-  - firefox_lazy_transparent.png
+  - url: firefox_lazy.png
+  - url: firefox_lazy_transparent.png
 ---
diff --git a/content/art/drawings/2021-cute-ava/index.md b/content/art/drawings/2021-cute-ava/index.md
index 3f9304e..dd350bb 100644
--- a/content/art/drawings/2021-cute-ava/index.md
+++ b/content/art/drawings/2021-cute-ava/index.md
@@ -6,5 +6,5 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - ava.png
+  - url: ava.png
 ---
diff --git a/content/art/drawings/2021-eeveelutions/index.md b/content/art/drawings/2021-eeveelutions/index.md
index 3fa6b4c..87c0869 100644
--- a/content/art/drawings/2021-eeveelutions/index.md
+++ b/content/art/drawings/2021-eeveelutions/index.md
@@ -6,7 +6,10 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - eevee.png
-  - flareon.png
-  - flareon_wink.png
+  - url:         eevee.png
+    description: Eevee
+  - url:         flareon.png
+    description: Flareon
+  - url:         flareon_wink.png
+    description: Flareon, winking
 ---
diff --git a/content/art/drawings/2021-lycanroc-ava/index.md b/content/art/drawings/2021-lycanroc-ava/index.md
index a23eb5e..3e0fe64 100644
--- a/content/art/drawings/2021-lycanroc-ava/index.md
+++ b/content/art/drawings/2021-lycanroc-ava/index.md
@@ -6,7 +6,7 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - ava.png
+  - url: ava.png
 ---
 
 Avatar for [@feralbot@botsin.space](https://botsin.space/@feralbot), a bot that posts pictures of feral characters from [e926](https://e926.net/).
diff --git a/content/art/drawings/2021-refsheet/index.md b/content/art/drawings/2021-refsheet/index.md
index d331217..8617a95 100644
--- a/content/art/drawings/2021-refsheet/index.md
+++ b/content/art/drawings/2021-refsheet/index.md
@@ -6,7 +6,10 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - bottom.png
-  - bottom_cofe.png
-  - side.png
+  - url:         bottom.png
+    description: Bottom view
+  - url:         bottom_cofe.png
+    description: Bottom view, holding a cup of coffee
+  - url:         side.png
+    description: Side view
 ---
diff --git a/content/art/drawings/2021-spooky-ava-1/index.md b/content/art/drawings/2021-spooky-ava-1/index.md
index 4d65b49..500bd11 100644
--- a/content/art/drawings/2021-spooky-ava-1/index.md
+++ b/content/art/drawings/2021-spooky-ava-1/index.md
@@ -6,5 +6,5 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - ava.png
+  - url: ava.png
 ---
diff --git a/content/art/drawings/2021-spooky-ava-2/index.md b/content/art/drawings/2021-spooky-ava-2/index.md
index 74a60ce..7fca6f0 100644
--- a/content/art/drawings/2021-spooky-ava-2/index.md
+++ b/content/art/drawings/2021-spooky-ava-2/index.md
@@ -6,5 +6,5 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - ava.png
+  - url: ava.png
 ---
diff --git a/content/art/drawings/2022-autumn-fox/index.md b/content/art/drawings/2022-autumn-fox/index.md
index 0384675..6816680 100644
--- a/content/art/drawings/2022-autumn-fox/index.md
+++ b/content/art/drawings/2022-autumn-fox/index.md
@@ -6,7 +6,7 @@ thumbnail:   png
 layout:      exhibit
 
 images:
-  - pic.png
+  - url: pic.png
 ---
 
 First attempt at cel shading.
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 @@
     }
 
     const setIndex = (i) => {
-        if (i < 0 || i >= thumbnailEls.length) {
+        if (i < 0 || i >= images.length) {
             return;
         }
-        thumbnailEls[currentIndex].classList.remove("is-selected");
+        images[currentIndex].thumbnailEl.classList.remove("is-selected");
         currentIndex = i;
         lightboxImgEl.src = figureEls[i].firstElementChild.href;
-        thumbnailEls[i].classList.add("is-selected");
+        lightboxImgEl.alt = images[currentIndex].description;
+        images[i].thumbnailEl.classList.add("is-selected");
     };
 
     const prev = () => {
@@ -48,7 +49,7 @@
     lightboxPrevEl.addEventListener("click", prev);
     lightboxNextEl.addEventListener("click", next);
     
-    const thumbnailEls = figureEls.map((figureEl, i) => {
+    const images = figureEls.map((figureEl, i) => {
         const go = e => {
             e.preventDefault();
             show();
@@ -72,7 +73,6 @@
         }
 
         anchorEl.addEventListener("click", go);
-
         const thumbnailButtonEl = document.createElement("button");
         const thumbnailImgEl = document.createElement("img");
 
@@ -89,7 +89,13 @@
 
         lightboxFooterEl.appendChild(thumbnailButtonEl);
 
-        return thumbnailButtonEl;
+        const captionEl = figureEl.querySelector("figcaption");
+        const description = captionEl?.innerHTML ?? "";
+
+        return {
+            thumbnailEl: thumbnailButtonEl,
+            description,
+        };
     });
 
     setIndex(0);