Fullscreen Lightbox
La photo cliquée passe en vrai plein écran du navigateur, sur fond presque noir ; sur iPhone, où ce mode n'existe pas, elle couvre toute la fenêtre.
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
Au clic sur une vignette .fslb-thumb, le script ouvre le <dialog> modal puis demande le plein écran pour .fslb-stage, la scène qu'il contient (un <dialog> lui-même ne peut pas passer en plein écran : les trois moteurs le refusent). La demande part pendant le clic, comme l'exige le navigateur.
En plein écran, barres et onglets disparaissent : la photo s'affiche au plus grand, jusqu'à 90 % de la largeur et 85 % de la hauteur de l'écran, sur rgba(0, 0, 0, 0.98), avec ✕ fixé en haut à droite. Si l'on quitte le plein écran par la touche Échap du navigateur, l'événement fullscreenchange ferme aussi la visionneuse ; ✕ ou un clic sur le noir font les deux à la fois.
Quand le plein écran est refusé (iPhone, page dans une <iframe> sans allow="fullscreen", navigateur ancien), la demande échoue sans bruit et rien d'autre ne change : le dialog occupe déjà toute la fenêtre, seules les barres du navigateur restent visibles. Mesuré en forçant ce refus : scène de 1280 × 800 sur une fenêtre de 1280 × 800.
Accessibilité
- Boutons et nom : vignettes en
<button>, ✕ nommé « Fermer », visionneuse nommée « Visionneuse d'images ». - Focus : posé sur ✕ à l'ouverture, gardé dans la visionneuse (page derrière inerte), rendu à la vignette à la fermeture, y compris quand on sort par la touche Échap du plein écran.
- Échap : en plein écran, le navigateur l'utilise pour quitter ce mode et la visionneuse se ferme avec ; sans plein écran, c'est le script qui ferme.
- Mouvement réduit : pas de fondu ni d'agrandissement ; le plein écran est demandé de la même façon.
- Limite : le plein écran retire les repères du navigateur ; gardez ✕ visible (il l'est par défaut) et ne l'ouvrez jamais sans un clic de l'utilisateur.
Compatibilité navigateur
API Fullscreen sans préfixe : Chrome 71, Firefox 64, Safari 16.4 ; sur iOS, iPad seulement (@mdn/browser-compat-data : « Only available on iPad, not on iPhone »). Le reste suit le socle des visionneuses (<dialog> modal : Firefox 98, Safari 15.4). Plein écran obtenu dans Chromium 151, Firefox 153 et WebKit 26.5 ; sortie du plein écran = visionneuse fermée dans les trois.
iPhone, Safari 15.4 à 16.3 et iframe sans autorisation : la visionneuse couvre la fenêtre (position fixe, 100 % × 100 %), l'image garde la même taille maximale. Sans showModal(), rien ne s'ouvre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0176-root">
<div class="fslb-grid">
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé ambre vers rouge" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé rose vers violet" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé indigo vers violet" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé cyan vers émeraude" width="1920" height="1280"></button>
</div>
<dialog class="fslb-viewer" aria-label="Visionneuse d'images">
<div class="fslb-stage">
<button type="button" class="fslb-close" aria-label="Fermer"><svg>…</svg></button>
<img class="fslb-image" alt="">
</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 |
|---|---|---|
Taille maximale de l'image (CSS — .fslb-image) |
max-width: 90vw; max-height: 85vh |
L'image n'est jamais agrandie au-delà de sa taille réelle : utilisez des photos larges ou data-full. |
Fond de la scène (CSS — .fslb-stage) |
rgba(0, 0, 0, 0.98) |
C'est la scène, et non le dialog, qui passe en plein écran : sa couleur est celle qu'on voit. |
Position de ✕ (CSS — .fslb-close) |
fixe, 20 px du haut et de la droite | Reste visible en plein écran comme en mode fenêtre. |
Vignettes (CSS — --fslb-thumb, --fslb-gap) |
120px, 10px | Largeur (format 3:2) et écart des boutons dans la page. |
Grande image (HTML — data-full) |
absent | Adresse chargée à l'ouverture à la place de la vignette. |
Plein écran dans une iframe (HTML — allow="fullscreen") |
non autorisé par défaut | Sans cet attribut sur l'<iframe> qui contient la galerie, le navigateur refuse et la visionneuse reste en mode fenêtre. |
FAQ
fullscreenchange sur la scène et ferme aussitôt la visionneuse. Hors plein écran, Échap est géré directement.
