<div class="lightbox" x-data="{lightboxOpen: false, imgSrc: ''}" x-show="lightboxOpen" x-transition.opacity @lightbox.window="lightboxOpen = true; imgSrc = $event.detail; console.log($event.detail)">
  <div class="lightbox-container">
    <div class="lightbox-content" x-show="lightboxOpen" x-transition.scale>
      <button class="lightbox-close" @click="lightboxOpen = false">&times;</button>
      <img :src="imgSrc" @click.away="lightboxOpen = false">
    </div>
  </div>
</div>

<div x-data class="gallery">
  <img src="https://picsum.photos/id/1/160/160" @click="$dispatch('lightbox', 'https://picsum.photos/id/1/640/360')" />
  <img src="https://picsum.photos/id/2/160/160" @click="$dispatch('lightbox', 'https://picsum.photos/id/2/640/360')" />
  <img src="https://picsum.photos/id/3/160/160" @click="$dispatch('lightbox', 'https://picsum.photos/id/3/640/360')" />
  <img src="https://picsum.photos/id/4/160/160" @click="$dispatch('lightbox', 'https://picsum.photos/id/4/640/360')" />
</div>

.gallery {
  display: flex;
  gap: 1em;
}

.gallery img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lighbox-container * {
  max-width: 100%;
}

.lightbox-content {
  position: relative;
}

.lightbox-close {
  position: absolute;
  top: -1em;
  right: -1em;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  font-size: 1.8em;
}