Galerie d’images

Grille d’images avec visionneuse plein écran (lightbox). Navigation par flèches clavier, focus trap et préchargement des images adjacentes.

Exemple

Forêt tropicale

Cours d’eau

Relief montagneux

Côte atlantique

<div class="bj-gallery" data-bj-gallery>
  <div class="bj-gallery__item">
    <img class="bj-gallery__img" src="…" alt="…" loading="lazy" />
    <span class="bj-gallery__caption">Légende</span>
  </div>
  …
</div>

Grille à 2 colonnes

Classe bj-gallery--cols-2.

<div class="bj-gallery bj-gallery--cols-2" data-bj-gallery>…</div>

Grille à 3 colonnes (défaut)

Sans modificateur : la grille suit la mise en page standard à trois colonnes.

Trois colonnes

<div class="bj-gallery" data-bj-gallery>…</div>

Grille à 4 colonnes

Classe bj-gallery--cols-4. Sur petit écran, la feuille de style repasse automatiquement à deux colonnes.

<div class="bj-gallery bj-gallery--cols-4" data-bj-gallery>…</div>

Classes CSS (grille et lightbox)

Classe	Description
`bj-gallery`	Grille 3 colonnes par défaut.
`bj-gallery--cols-2`	Grille 2 colonnes.
`bj-gallery--cols-4`	Grille 4 colonnes.
`bj-gallery__item`	Conteneur image cliquable.
`bj-gallery__img`	Image avec ratio 4:3.
`bj-gallery__caption`	Légende en superposition.
`bj-lightbox`	Overlay plein écran ; affiché lorsque data-bj-expanded est présent.
`data-bj-expanded`	État ouvert de la visionneuse (posé par le script gallery).
`bj-lightbox__content`	Colonne image + légende.
`bj-lightbox__img`	Image agrandie.
`bj-lightbox__caption`	Légende sous l’image.
`bj-lightbox__close`	Fermeture.
`bj-lightbox__nav`	Précédent / suivant (bj-lightbox__nav--prev / --next).
`bj-lightbox__counter`	Compteur « courant / total ».

La visionneuse est créée automatiquement par le script. Elle affiche l’image agrandie avec navigation, compteur et légende. Utilisez data-bj-gallery-src sur l’image pour fournir une URL haute résolution différente de la miniature.

<!-- Injectée par le script à l’ouverture ; équivalent structurel -->
<div class="bj-lightbox" data-bj-expanded role="dialog" aria-label="Visionneuse">
  <span class="bj-lightbox__counter">1 / 4</span>
  <button type="button" class="bj-lightbox__close" aria-label="Fermer">…</button>
  <button type="button" class="bj-lightbox__nav bj-lightbox__nav--prev" aria-label="Précédent">…</button>
  <div class="bj-lightbox__content">
    <img class="bj-lightbox__img" src="…" alt="…" />
    <p class="bj-lightbox__caption">Légende</p>
  </div>
  <button type="button" class="bj-lightbox__nav bj-lightbox__nav--next" aria-label="Suivant">…</button>
</div>