comfycamp/src/components/Gallery.astro

---
interface Image {
  src: string
  alt: string
}
interface Props {
  images: Image[]
}
const { images } = Astro.props
const rowCount = Math.ceil(images.length/3)
---

<div>
  <div id="gallery" style={`grid-template-rows: repeat(${rowCount}, 263px);`}>
    {images.map(img => (
      <img src={img.src} alt={img.alt} loading="lazy" />
    ))}
  </div>
  <div id="fullscreenGallery" style="opacity: 0;">
    <img id="fullscreenImage" />
    <div id="fullscreenAlt"></div>
  </div>
</div>

<style>
  #gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    width: 100%;
  }

  #gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  #fullscreenGallery {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: #0008;
    padding: 1em;
    backdrop-filter: blur(42px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
  }

  #fullscreenAlt {
    font-style: italic;
    text-shadow: 0 0 4px rgba(0,0,0,.5);
  }

  #fullscreenImage {
    width: 100%;
    max-width: 1200px;
    display: block;
    object-fit: cover;
  }
</style>

<script>
  window.onload = () => {
    const gallery = document.getElementById("gallery")
    if (!gallery) return

    const fsContainer = document.getElementById("fullscreenGallery")
    if (!fsContainer) return

    const fsImg = document.getElementById("fullscreenImage") as HTMLImageElement
    if (!fsImg) return
    const fsAlt = document.getElementById("fullscreenAlt")
    if (!fsAlt) return

    fsContainer.addEventListener("click", () => {
      fsContainer.style.opacity = "0"
      fsContainer.style.pointerEvents = "none"
    })

    for (const img of Array.from(gallery.children) as HTMLImageElement[]) {
      img.addEventListener("click", () => {
        if (fsContainer.style.opacity === "0") {
          fsContainer.style.opacity = "1"
          fsContainer.style.pointerEvents = "auto"
          fsImg.src = img.src
          fsAlt.innerHTML = img.alt
        } else {
          fsContainer.style.opacity = "0"
          fsContainer.style.pointerEvents = "none"
        }
      })
    }
  }
</script>