Here is the link to the codebase of this image lightbox plugin - https://www.sveltelab.dev/mg31azbxbb3f1kh
It is just one component you will have to use it somewhere in the app.
<script>
import Lightbox from "$lib/Lightbox.svelte"
</script>
<Lightbox />That’s it. Now you can use it to create a lightbox effect for image gallery. The class lbx and dataset values are required.
<button data-image="1084-536x354-grayscale.jpg" data-title="Walrus" class="lbx">
<img src="1084-536x354-grayscale.jpg" alt="" />
</button>
<button data-image="218-536x354.jpg" data-title="A beach" class="lbx">
<img src="218-536x354.jpg" alt="" />
</button>
<button data-image="866-536x354.jpg" data-title="Snowy mountain" class="lbx">
<img src="866-536x354.jpg" alt="" />
</button>Here is how it looks like,
Initial state
Lightbox effect
It looks pretty rough. I haven’t optimized it for accessibility as well but I think you can tweak it as per your liking.
You can navigate through the pictures using arrow keys on the keyboard but there isn’t a swipe support yet.
You are free to use this and build a package that can help others.
Thanks for reading!