Product Zoom
Galerie produit : les miniatures changent la grande photo au survol, au clic, à la tape ou au clavier, et la grande photo zoome deux fois sous le pointeur.
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 grande photo .pdz-frame et les miniatures .pdz-thumb sont de vraies balises : un <img> pour la grande, un <button> contenant un <img> pour chaque miniature. Choisir une miniature (survol à la souris, clic, tape ou focus clavier) copie son image dans la grande photo, ou le fichier de son data-zoom-src s'il existe, avec son texte alternatif. La miniature choisie passe à aria-pressed="true" et la grande photo fait une petite impulsion à 110 % pendant 0,3 s.
Le zoom : quand la souris ou le doigt est sur la grande photo, la classe is-zoomed l'agrandit à --pdz-zoom (2) et le point visé devient l'origine du zoom, comme une loupe qui suivrait le pointeur. En sortant, la photo revient entière.
Toutes les recherches partent de la racine .fx-0185-root : deux galeries sur une page ont chacune leur grande photo et ne se pilotent pas, et le script peut être collé deux fois.
Accessibilité
- Miniatures : de vrais boutons, atteints au Tab, nommés par le texte alternatif de leur image, avec
aria-pressedpour dire laquelle est affichée. Le focus suffit à changer la photo. - Zoom au clavier : la grande photo se prend au Tab et s'agrandit au centre ; les flèches déplacent la zone de 5 % (20 % avec Maj), Échap rend la photo entière.
- Toucher : une tape sur une miniature change la photo ; poser et glisser le doigt sur la grande photo zoome et parcourt, lever le doigt rend la photo entière (
touch-action: nonesur la grande photo seulement). Une simple tape ne laisse pas la photo agrandie. - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni impulsion ni glissement ; le zoom est appliqué d'un coup.
Compatibilité navigateur
Boutons HTML, Pointer Events, transformations CSS, aspect-ratio et 3 Ko de JavaScript, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux galeries indépendantes (survoler la 2e ne touche plus la 1re), script collé deux fois sans erreur, miniatures au Tab, tape et glisser réels à 390 px (Chromium).
Sans JavaScript, la grande photo et les miniatures s'affichent, sans changement ni zoom. Dans Safari, Tab n'atteint les boutons que si l'option « Tab pour sélectionner chaque élément » est active.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0185-root">
<div class="pdz-gallery">
<div class="pdz-frame" tabindex="0" role="group" aria-label="Photo du produit : survolez-la, glissez le doigt ou utilisez les flèches pour zoomer">
<img class="pdz-image" src="vue-1-grande.jpg" alt="Vue de face">
<span class="pdz-label" aria-hidden="true">Product View</span>
</div>
<div class="pdz-thumbs" role="group" aria-label="Variantes du produit">
<button type="button" class="pdz-thumb" aria-pressed="true"><img src="vue-1.jpg" data-zoom-src="vue-1-grande.jpg" alt="Vue de face"></button>
<button type="button" class="pdz-thumb" aria-pressed="false"><img src="vue-2.jpg" data-zoom-src="vue-2-grande.jpg" alt="Vue de dos"></button>
<!-- autant de miniatures que voulu -->
</div>
</div>
</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 |
|---|---|---|
| Images (HTML — miniatures et grande photo) | 4 motifs de couleur (SVG intégrés) | Une miniature = un <button class="pdz-thumb"> avec son <img>. data-zoom-src sur l'image d'une miniature donne la version grande affichée et zoomée. Mettez la même image dans .pdz-image au départ. |
--pdz-zoom |
2 | Agrandissement de la grande photo sous le pointeur. |
--pdz-width · --pdz-ratio · --pdz-radius |
280px · 7 / 4 · 0.75rem | Largeur maximale, proportions et arrondi de la grande photo (et de la galerie). |
--pdz-thumb · --pdz-thumb-ratio |
60px · 4 / 3 | Taille et forme des miniatures. |
--pdz-accent |
#6366f1 | Bordure de la miniature choisie ou survolée. |
Légende .pdz-label |
« Product View » | Texte centré sur la grande photo, masqué pendant le zoom ; à retirer sur de vraies photos. |
FAQ
data-zoom-src sur l'image d'une miniature. La miniature reste légère et la grande photo charge le fichier large au moment du choix.pointerenter du script. Le clic, la tape et le clavier continuent de fonctionner.
