Work in Progress
This library is still a work in progress and things will likely change.
Call Us
--- 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>
--- import { twMerge as tw } from 'tailwind-merge'; import Lightbox from '@components/Lightbox.astro'; interface Props { class?: string; images: { src: string; alt: string; }[]; imageClass?: string; } const { class: className, images, imageClass: imageClassName } = Astro.props; --- <Lightbox class={tw('grid grid-cols-2 md:grid-cols-4 gap-6', className)} name="gallery" images={images} imageClass={imageClassName} />
We use cookies to provide the best experience.