Lightbox for Svelte/SvetleKit

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!

Find related articles