Lightbox for Svelte/SvetleKit

I have tried a lot of image lightbox plugins for SvelteKit but most of them do not work well with SvelteKit. I tried developing one for myself.

svelte logo

Want to build a Svelte/SvelteKit site? Hire Me.

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

svelte lightbox

Lightbox effect

svelte lightbox

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!

Find related articles

Let's discuss on Twitter