mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
24 lines
913 B
Plaintext
24 lines
913 B
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Photo from '@components/demo/Photo.astro'
|
|
import photos from '@data/photos.json'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
|
|
const filteredPhotos = photos.filter((photo) => photo.horizontal)
|
|
---
|
|
|
|
<DefaultLayout title="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']} description="Click any photo to open it full-screen, then arrow or swipe through the rest of the gallery.">
|
|
<DocsLink slot="page-header-actions" path="/ui/plugins/lightbox" />
|
|
<div class="row row-cols-3 row-cols-md-4 row-cols-lg-6 g-3">
|
|
{
|
|
filteredPhotos.map((photo) => (
|
|
<div class="col">
|
|
<a data-fslightbox="gallery" href={`./static/photos/${photo.file}`} aria-label={photo.title}>
|
|
<Photo photo={photo} class="rounded border" ratio="1x1" />
|
|
</a>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</DefaultLayout>
|