<div class="lightbox" x-data="{lightboxOpen: false, imgSrc: ''}" x-show="lightboxOpen" x-transition
    @lightbox.window="lightboxOpen = true; imgSrc = $event.detail; console.log($event.detail)">
    <div class="lightbox-container">
      <img :src="imgSrc" @click.away="lightboxOpen = false">
    </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%;
}