Lightbox

Component Images

Preview

Lightbox

---
interface Props {
	as?: string;
	class?: string;
	name?: string;
	images?: {
		src: string;
		alt?: string;
	}[];
	imageClass?: string;
	loading?: 'lazy' | 'eager';
}

const {
	as = 'div',
	class: className,
	name = 'lightbox',
	images = [],
	imageClass: imageClassName,
	loading = 'lazy',
} = Astro.props;
const TagName = as;
---

<TagName class:list={['lightbox', className]}>
	{
		images.map((image) => {
			return (
				<a
					data-fslightbox={name}
					data-type="image"
					href={image.src}
					class={imageClassName}
				>
					<img
						src={image.src}
						alt={image?.alt || ''}
						loading={loading}
					/>
				</a>
			);
		})
	}
</TagName>

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js"
></script>

Astro Component

This component is included with the Astro Starter Kit.

Usage

In another component or page, import the component and use it.

---
import Lightbox from '@components/Lightbox.astro';
---

<Lightbox
	class="grid grid-cols-2 md:grid-cols-4 gap-6"
	name="gallery"
	images={[
		{ src: 'https://unsplash.it/1080?random=1' },
		{ src: 'https://unsplash.it/1080?random=2' },
		{ src: 'https://unsplash.it/1080?random=3' },
		{ src: 'https://unsplash.it/1080?random=4' },
	]}
/>

The class prop is optional, use this to style groups of images like a gallery. The name prop is also optional, but if you have more than one Lightbox or Gallery on a page, specify a unique name to ensure each Lightbox displays the correct images.