<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">×</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;
}
This Pen doesn't use any external CSS resources.