Lightbox with Thumbnails
Grande image et, juste dessous, la bande de toutes les miniatures : on saute directement à la photo voulue, ou on avance avec ‹ ›, ← → et le doigt.
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
Vous n'écrivez la galerie qu'une fois. Au chargement, le script parcourt les boutons .tlb-thumb et fabrique dans .tlb-strip un bouton miniature pour chacun, avec la même image et le même alt. La bande suit donc toujours la galerie, quel que soit le nombre de photos.
La miniature de l'image affichée est mise en avant (opacité pleine, bordure blanche, agrandie de 10 %) et porte aria-current="true" ; les autres restent à demi transparentes. Quand la bande est plus large que 80 % de l'écran, elle défile horizontalement et recentre la miniature active à chaque changement.
Le reste vient de la visionneuse à flèches : ‹ › en boucle, touches ← →, glissement horizontal de plus de 50 px sur la grande image, Échap / ✕ / clic sur le fond pour fermer. La grande image est limitée à 80 % de la largeur et à la hauteur de l'écran moins 110 px, pour laisser la bande visible même en paysage sur téléphone.
Accessibilité
- Deux façons de choisir : les miniatures de la bande sont des boutons nommés par l'
altde leur photo, regroupés dans unrole="group"« Miniatures » ; la miniature active est signalée pararia-current. - Clavier : Tab parcourt ✕, ‹, ›, puis chaque miniature ; ← → changent d'image depuis n'importe quel bouton de la visionneuse ; Échap ferme.
- Dialog :
showModal(), nom « Visionneuse d'images », page derrière inerte, focus rendu à la vignette d'origine à la fermeture. - Mouvement réduit : ouverture sans fondu ni zoom, miniatures sans transition ; la navigation et le balayage restent disponibles.
Compatibilité navigateur
Socle commun aux visionneuses du site (<dialog> modal : Firefox 98, Safari 15.4 ; aspect-ratio : Chrome 88). justify-content: safe center évite qu'une bande trop longue soit coupée à gauche ; là où safe n'est pas compris, la déclaration précédente center s'applique. Essais dans Chromium 151, Firefox 153 et WebKit 26.5 : bande construite dans chaque copie, clic sur la 4e miniature, toucher à 390 px.
Sans JavaScript, la bande reste vide et rien ne s'ouvre : seule la galerie est visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0175-root">
<div class="tlb-grid">
<button type="button" class="tlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé violet vers cyan" width="600" height="400"></button>
<button type="button" class="tlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé cyan vers émeraude" width="600" height="400"></button>
<button type="button" class="tlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé fuchsia vers rose" width="600" height="400"></button>
<button type="button" class="tlb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé rose vers violet" width="600" height="400"></button>
</div>
<dialog class="tlb-viewer" aria-label="Visionneuse d'images">
<div class="tlb-content">
<button type="button" class="tlb-close" aria-label="Fermer"><svg>…</svg></button>
<button type="button" class="tlb-nav tlb-prev" aria-label="Image précédente"><svg>…</svg></button>
<img class="tlb-image" alt="">
<button type="button" class="tlb-nav tlb-next" aria-label="Image suivante"><svg>…</svg></button>
<div class="tlb-strip" role="group" aria-label="Miniatures"></div>
</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 |
|---|---|---|
Vignettes de la galerie (CSS — --tlb-thumb) |
120px | Largeur des boutons de la page (format 3:2). |
Miniatures de la bande (CSS — .tlb-strip-btn) |
60 × 40 px | Taille fixe dans le CSS ; agrandissez-la et réduisez d'autant la marge de 110 px laissée sous la grande image. |
Hauteur de la grande image (CSS — max-height de .tlb-image) |
calc(80vh - 110px) |
La place restante est celle de la bande ; à ajuster si vous changez la taille des miniatures. |
Voile (CSS — --tlb-backdrop) |
rgba(0, 0, 0, 0.9) |
Fond de la visionneuse. |
Arrondis (CSS — --tlb-radius, --tlb-radius-lg) |
0.5rem, 1rem | Vignettes de la page ; grande image et fond de la bande. |
Grande version (HTML — data-full) |
absent | La grande vue charge cette adresse ; la bande garde la vignette légère. |
Seuil du balayage (JS — 50) |
50 px | Glissement horizontal nécessaire sur la grande image pour changer de photo. |
FAQ
<div class="tlb-strip"> vide : le script la remplit à partir de la galerie. Il ne voit que les photos présentes à son lancement : pour une galerie construite plus tard, insérez toute la racine puis relancez le script (les racines déjà câblées sont ignorées).display: none), il reste compté, présent dans la bande et accessible par les flèches.
