Lightbox with Caption
Visionneuse à flèches avec une légende sous la photo — titre et précision lus dans votre HTML — qui monte en fondu à l'ouverture.
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 légende vient de deux attributs posés sur chaque bouton .clb-thumb : data-title (le titre, en gras) et data-desc (la ligne grise, lieu, date ou détail). Sans data-title, c'est l'alt de la photo qui sert de titre ; sans data-desc, la seconde ligne est masquée. Changer un texte dans le HTML suffit, le script ne contient aucune légende.
La visionneuse est un <figure> dans un <dialog> modal : la photo, puis un <figcaption>. À l'ouverture, la légende part 20 px plus bas et transparente, puis remonte en 0,4 s après 0,2 s de délai, juste après l'arrivée de l'image. Ensuite, ‹ › (en boucle), ← → et un glissement horizontal de plus de 50 px sur la photo changent l'image et sa légende en même temps.
Pour que la légende reste visible, la photo est limitée à la hauteur de l'écran moins 130 px (et à 80 % de sa largeur). Fermeture par ✕, Échap ou clic sur le fond.
Accessibilité
- Légende reliée à l'image :
<figure>+<figcaption>, et la légende est une régionaria-live="polite": chaque nouvelle légende est lue quand on passe à la photo suivante. - Boutons nommés : vignettes, ‹ « Image précédente », › « Image suivante », ✕ « Fermer ».
- Dialog modal : nom « Visionneuse d'images », focus sur ✕ à l'ouverture, page derrière inerte, focus rendu à la vignette.
- Mouvement réduit : la légende est affichée directement, sans montée ni fondu, comme l'image.
Compatibilité navigateur
Même socle que les autres visionneuses : <dialog> modal (Chrome 37, Firefox 98, Safari 15.4) et aspect-ratio (Chrome 88). Contrôlé dans Chromium 151, Firefox 153 et WebKit 26.5 : légende changée dans le HTML puis lue à l'ouverture, copie unique ouverte quand deux galeries sont sur la page, script collé deux fois sans saut de légende.
Sans showModal(), rien ne s'ouvre ; vos textes restent dans les attributs, invisibles. Pour qu'ils soient lus même sans script, répétez-les dans l'alt.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0177-root">
<div class="clb-grid">
<button type="button" class="clb-thumb" aria-haspopup="dialog" data-title="Aurore boréale" data-desc="Norvège, 2024"><img src="photo.jpg" alt="Dégradé indigo vers violet" width="600" height="400"></button>
<button type="button" class="clb-thumb" aria-haspopup="dialog" data-title="Coucher de soleil" data-desc="Cyclades, Grèce"><img src="photo.jpg" alt="Dégradé fuchsia vers rose" width="600" height="400"></button>
<button type="button" class="clb-thumb" aria-haspopup="dialog" data-title="Forêt mystique" data-desc="Amazonie, Brésil"><img src="photo.jpg" alt="Dégradé violet vers cyan" width="600" height="400"></button>
<button type="button" class="clb-thumb" aria-haspopup="dialog" data-title="Océan Pacifique" data-desc="Hawaï, États-Unis"><img src="photo.jpg" alt="Dégradé cyan vers émeraude" width="600" height="400"></button>
</div>
<dialog class="clb-viewer" aria-label="Visionneuse d'images">
<figure class="clb-content">
<button type="button" class="clb-close" aria-label="Fermer"><svg>…</svg></button>
<button type="button" class="clb-nav clb-prev" aria-label="Image précédente"><svg>…</svg></button>
<img class="clb-image" alt="">
<button type="button" class="clb-nav clb-next" aria-label="Image suivante"><svg>…</svg></button>
<figcaption class="clb-caption" aria-live="polite">
<strong class="clb-title"></strong>
<span class="clb-desc"></span>
</figcaption>
</figure>
</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 |
|---|---|---|
Titre de la légende (HTML — data-title) |
l'alt de l'image |
Texte en gras sous la photo. |
Seconde ligne (HTML — data-desc) |
vide (ligne masquée) | Lieu, date, auteur… en gris sous le titre. |
Hauteur laissée à la légende (CSS — max-height de .clb-image) |
calc(80vh - 130px) |
Augmentez les 130 px pour des légendes sur plusieurs lignes. |
Montée de la légende (CSS — .clb-caption) |
20 px, 0,4 s après 0,2 s | transform et transition de départ ; à mettre à zéro pour une légende fixe. |
Couleur de la seconde ligne (CSS — .clb-desc) |
#8b8b93 |
Gris qui reste lisible sur le fond noir. |
Vignettes et voile (CSS — --clb-thumb, --clb-backdrop) |
120px, rgba(0, 0, 0, 0.9) |
Largeur des boutons de la page et fond de la visionneuse. |
Grande photo (HTML — data-full) |
absent | Adresse chargée dans la visionneuse à la place de la vignette. |
FAQ
<button class="clb-thumb" data-title="Viaduc de Corlanne" data-desc="Mai 2024">. Le script les lit au moment où la photo s'affiche ; il n'y a rien à modifier dans le JavaScript.textContent), ce qui empêche aussi d'y glisser du code par erreur. Pour une légende riche, il faudrait remplacer textContent par votre propre gabarit.
