BjGallery

Grille d’images React avec lightbox en portail : clic ou clavier sur une vignette ouvre la visionneuse ; flèches et Échap sont gérés. Chaque entrée peut définir src, alt, caption et thumbnail optionnel.

Utilisation

import { BjGallery } from '@flrxnt/dsbj/react'

const images = [
  { src: 'https://picsum.photos/id/10/1200/800', alt: 'Forêt', caption: 'Paysage 1' },
  { src: 'https://picsum.photos/id/20/1200/800', alt: 'Plage', caption: 'Paysage 2' },
]

export function Example() {
  return <BjGallery images={images} cols={3} />
}

cols : 2, 3 et 4

bj-gallery--cols-2

bj-gallery (cols 3 défaut)

bj-gallery--cols-4

import { BjGallery } from '@flrxnt/dsbj/react'

const imgs = [
  { src: 'https://picsum.photos/id/1/800/600', alt: 'A' },
  { src: 'https://picsum.photos/id/2/800/600', alt: 'B' },
]

export function ColsDemo() {
  return (
    <>
      <BjGallery images={imgs} cols={2} />
      <BjGallery images={imgs} cols={3} />
      <BjGallery images={imgs} cols={4} />
    </>
  )
}

images : vignette, légende et combinaisons

VilleVignette + légende
import { BjGallery } from '@flrxnt/dsbj/react'

const images = [
  {
    src: 'https://picsum.photos/id/30/1600/900',
    thumbnail: 'https://picsum.photos/id/30/400/300',
    alt: 'Ville',
    caption: 'Centre-ville',
  },
]

export function ThumbCaption() {
  return <BjGallery images={images} cols={3} />
}

className sur la galerie

import { BjGallery } from '@flrxnt/dsbj/react'

export function StyledGallery() {
  const images = [{ src: 'https://picsum.photos/id/5/800/600', alt: 'Photo' }]
  return <BjGallery images={images} cols={3} className="my-gallery" />
}

Aperçu

ForêtPaysage 1
PlagePaysage 2
VillePaysage 3

Props

PropDescription
imagesTableau d’objets avec champs src, alt et caption optionnels ; thumbnail optionnel remplace src pour la tuile.
colsNombre de colonnes : 2, 3 (défaut) ou 4.
classNameClasse sur la racine .bj-gallery.