Lightbox with Navigation
Visionneuse qui feuillette toute la galerie : compteur « 2 / 4 », flèches ‹ › qui bouclent, touches ← → et balayage du doigt sur l'image.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La galerie est une suite de boutons .nlb-thumb, chacun avec sa photo. Le script les compte à l'ouverture de la page et écrit ce nombre dans .nlb-total : ajoutez une sixième photo, le compteur affiche « / 6 » sans autre modification. Un clic sur une vignette ouvre le <dialog> modal sur cette image-là.
Dans la visionneuse, ‹ et › (ou ← et → au clavier) passent à l'image voisine ; après la dernière on revient à la première, et inversement. Sur l'image, un glissement horizontal de plus de 50 px au doigt, au stylet ou à la souris fait la même chose (Pointer Events, le geste vertical est ignoré, le pincement pour zoomer reste permis). La grande image vient de data-full si le bouton en a un, sinon de la vignette.
Au-delà de 768 px de large, les flèches flottent à 70 px de part et d'autre de l'image ; en dessous elles passent à l'intérieur, sur un rond sombre, pour ne jamais sortir de l'écran d'un téléphone. Ouverture : fondu du fond et image qui passe de 80 à 100 % en 0,4 s.
Accessibilité
- Vrais boutons partout : vignettes, ‹, › et ✕ sont des
<button>avec un nom (« Image précédente », « Image suivante », « Fermer »). - Fenêtre modale :
showModal()donne le rôle dialog, rend la page derrière inerte et place le focus sur ✕ ; le dialog s'annonce « Visionneuse d'images ». - Compteur annoncé : le paragraphe « 2 / 4 » est une région
aria-live="polite", lue après chaque changement d'image ; l'altde la vignette passe sur la grande image. - Fermeture : Échap, ✕ ou un clic sur le fond ; le focus retourne sur la vignette d'origine.
- Mouvement réduit : plus de fondu ni de zoom à l'ouverture. Changer d'image n'a jamais d'animation, le balayage reste actif.
Compatibilité navigateur
Mêmes bases que la visionneuse simple : <dialog> modal (Firefox 98, Safari 15.4) et aspect-ratio (Chrome et Edge 88). Les Pointer Events et setPointerCapture sont présents depuis Chrome 55, Firefox 59 et Safari 13. Vérifié dans Chromium 151, Firefox 153 et WebKit 26.5, dont un balayage tactile réel à 390 px dans Chromium et le script collé deux fois (→ avance bien d'une seule image).
Sans showModal(), rien ne s'ouvre et la galerie reste une rangée de photos.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0172-root">
<div class="nlb-grid">
<button type="button" class="nlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé fuchsia vers rose" width="600" height="400"></button>
<button type="button" class="nlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé violet vers cyan" width="600" height="400"></button>
<button type="button" class="nlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé rose vers violet" width="600" height="400"></button>
<button type="button" class="nlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé indigo vers violet" width="600" height="400"></button>
</div>
<dialog class="nlb-viewer" aria-label="Visionneuse d'images">
<div class="nlb-content">
<p class="nlb-counter" aria-live="polite"><span class="nlb-current">1</span> / <span class="nlb-total">4</span></p>
<button type="button" class="nlb-close" aria-label="Fermer"><svg>…</svg></button>
<button type="button" class="nlb-nav nlb-prev" aria-label="Image précédente"><svg>…</svg></button>
<img class="nlb-image" alt="">
<button type="button" class="nlb-nav nlb-next" aria-label="Image suivante"><svg>…</svg></button>
</div>
</dialog>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Largeur d'une vignette (CSS — --nlb-thumb) |
120px | Les vignettes gardent le format 3:2 ; la rangée passe à la ligne quand la place manque. |
Écart de la grille (CSS — --nlb-gap) |
10px | Espace entre deux vignettes. |
Voile (CSS — --nlb-backdrop) |
rgba(0, 0, 0, 0.9) |
Fond de la visionneuse ; flèches, compteur et ✕ sont blancs, le voile doit rester foncé. |
Coins (CSS — --nlb-radius, --nlb-radius-lg) |
0.5rem, 1rem | Arrondi des vignettes et de la grande image. |
Couleur du survol (CSS — --nlb-accent) |
rgba(99, 102, 241, 0.3) |
Ombre portée de la vignette survolée ou atteinte au clavier. |
Image haute définition (HTML — data-full) |
absent | À mettre sur un bouton .nlb-thumb : la visionneuse charge cette adresse au lieu de la vignette. |
Seuil du balayage (JS — Math.abs(dx) > 50) |
50 px | Distance horizontale minimale pour changer d'image au doigt ou à la souris. |
Durée de fermeture (JS — CLOSE_MS) |
400 ms | Temps laissé au fondu avant de fermer le dialog ; à changer avec la transition du CSS. |
FAQ
show(), remplacez le calcul (i + thumbs.length) % thumbs.length par Math.max(0, Math.min(thumbs.length - 1, i)) : les flèches s'arrêtent alors aux deux bouts..nlb-image avec object-fit: contain..fx-0172-root a sa propre visionneuse et ses propres écouteurs, posés sur le dialog et non sur le document : la flèche droite ne fait avancer que la visionneuse ouverte.
