BjGallery

Composant Vue pour la grille d’images DSBJ avec lightbox : navigation, compteur et légendes. Les images sont passées via un tableau typé.

Utilisation

<script setup>
import { BjGallery } from '@flrxnt/dsbj/vue'

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' },
]
</script>

<template>
  <BjGallery :images="images" :cols="3" />
</template>

Aperçu (HTML)

ForêtPaysage 1
PlagePaysage 2
VillePaysage 3

cols : 2, 3 et 4 (aperçu HTML)

Modificateurs : bj-gallery--cols-2, (défaut 3, pas de classe), bj-gallery--cols-4.

<BjGallery :images="images" :cols="2" />
<BjGallery :images="images" :cols="3" />
<BjGallery :images="images" :cols="4" />

images : champs et combinaisons

src (requis pour l’image plein écran), alt, caption (sous la vignette), thumbnail (vignette différente du plein écran).

const mix = [
  { src: 'https://example.com/large.jpg', thumbnail: 'https://example.com/small.jpg', alt: 'Vue', caption: 'Légende' },
  { src: 'https://example.com/only.jpg', alt: 'Sans légende ni vignette' },
]

Slots

Pas de slots : la grille et la lightbox sont entièrement dérivées du tableau images.

Événements Vue

Pas d’emit : ouverture lightbox et navigation au clavier sont internes.

v-model

Pas de v-model : l’index affiché dans la lightbox est interne.

Props

PropDescription
imagesTableau d’objets avec champs src, alt et caption optionnels, thumbnail optionnel ; thumbnail remplace src pour la vignette si fourni.
colsNombre de colonnes de la grille : 2, 3 (défaut) ou 4.