Photo viewer

<div id="photos" class="figures">
  <figure>
    <a href="/media/photo-1-1600.jpg" data-dlb-width="1600" data-dlb-height="1066"><img src="/media/photo-1-480.jpg" alt="Diagonal bands of blue, orange, green and cream" /></a>
    <figcaption>Blue, orange and cream</figcaption>
  </figure>
  <figure>
    <a href="/media/photo-3-1600.jpg" data-dlb-width="1600" data-dlb-height="1066"><img src="/media/photo-3-480.jpg" alt="A thin blue line between pale blue and navy" /></a>
    <figcaption>Pale blue and navy, split by a thin line</figcaption>
  </figure>
  <figure>
    <a href="/media/photo-2-1600.jpg" data-dlb-width="1600" data-dlb-height="1066"><img src="/media/photo-2-480.jpg" alt="Dark teal over a thin orange stripe and orange" /></a>
    <figcaption>Teal over orange</figcaption>
  </figure>
  <figure>
    <a href="/media/photo-4-1600.jpg" data-dlb-width="1066" data-dlb-height="1600"><img src="/media/photo-4-480.jpg" alt="Amber stripes across dark red" /></a>
    <figcaption>Amber stripes, upright</figcaption>
  </figure>
</div>

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.figures figure {
  margin: 0;
}

.figures img {
  display: block;
  width: auto;
  height: 7rem;
}

.figures figcaption {
  max-width: 11rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

// dialog-lightbox from npm: the import map in hugo.toml (params.importmap) sends "dialog-lightbox" to jsDelivr
import { lightbox } from "dialog-lightbox";

const dialog = document.querySelector("dialog.box");
const caption = dialog.querySelector(".box-caption");
const box = lightbox({ gallery: document.getElementById("photos"), dialog });

// "change" also fires right after "open", so the first caption is set too
box.on("change", (slide) => {
  caption.textContent = slide.link.closest("figure").querySelector("figcaption").textContent;
});
box.on("close", () => {
  caption.textContent = "";
});