Magnifying Glass
Une loupe ronde suit la souris, le doigt ou les flèches du clavier et montre votre propre image agrandie deux fois, fichier haute définition compris.
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
Le cadre .mgl-frame contient une vraie balise <img class="mgl-image"> et un disque vide .mgl-lens. Quand la loupe s'ouvre, le script lui donne comme fond l'image elle-même, ou le fichier indiqué dans data-zoom-src si vous en fournissez un plus grand. Changez la photo dans le HTML : la loupe suit, rien n'est recopié dans le JavaScript.
À chaque déplacement, le script refait le recadrage de object-fit: cover (même échelle, même décalage que la photo affichée), le multiplie par data-zoom (2 par défaut) et place le fond pour que le point visé tombe au centre du disque. La loupe peut déborder du cadre : le bord arrondi du cadre la coupe proprement.
Le script cherche chaque .fx-0180-root de la page et câble chacune à part : deux loupes sur une même page ne se gênent pas, et coller le script deux fois ne casse rien. Le cadre prend toute la largeur disponible jusqu'à --mgl-width (280 px) et garde la forme donnée par --mgl-ratio.
Accessibilité
- Clavier : le cadre se reçoit au Tab et la loupe s'ouvre au centre (puis, les fois suivantes, à sa dernière position) ; les flèches la déplacent de 12 px (48 px avec Maj) et Échap la referme.
- Toucher : poser le doigt ouvre la loupe à cet endroit, glisser la promène, lever le doigt la ferme, y compris après une simple tape. Le cadre bloque le défilement de la page pendant le geste (
touch-action: none) : la page défile depuis le reste de l'écran. - Lecteurs d'écran : le cadre est un groupe nommé par son
aria-labelet l'image garde son texte alternatif ; la loupe et la légende sont masquées (aria-hidden), car elles ne montrent rien de plus que l'image. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la loupe apparaît sans fondu ; elle suit toujours le pointeur, car c'est l'utilisateur qui la déplace.
Compatibilité navigateur
Pointer Events, object-fit, aspect-ratio et environ 3,5 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : loupe sur une image rouge remplacée par l'acheteur (la loupe montre bien le rouge), deux copies indépendantes, script collé deux fois sans erreur, Tab et flèches, doigt réel à 390 px (Chromium), aucun débordement.
Sans JavaScript, l'image s'affiche seule, sans loupe. Avant Safari 15 et Chrome 88 (pas d'aspect-ratio), le cadre prend la hauteur de l'image elle-même ; le zoom reste juste car il est calculé sur la taille réelle du cadre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0180-root">
<div class="mgl-frame" tabindex="0" role="group" aria-label="Loupe : survolez l'image, glissez le doigt ou utilisez les flèches" data-zoom="2">
<img class="mgl-image" src="votre-photo.jpg" data-zoom-src="votre-photo-grande.jpg" alt="Description de la photo">
<span class="mgl-label" aria-hidden="true">Move Mouse</span>
<div class="mgl-lens" aria-hidden="true"></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 |
|---|---|---|
Image (HTML — src de .mgl-image) |
motif violet quadrillé (SVG intégré) | Mettez votre photo et son texte alt. Ajoutez data-zoom-src sur la même balise pour que la loupe montre un fichier plus grand et plus net que l'image affichée (même cadrage). |
data-zoom (sur .mgl-frame) |
2 | Facteur d'agrandissement dans la loupe. 3 à 4 pour du texte imprimé ou une carte, 1.5 pour une photo de produit. |
--mgl-size |
100px | Diamètre (ou côté) de la loupe. |
--mgl-shape |
50% | Arrondi de la loupe : 50% pour un disque, 0 ou quelques pixels pour une loupe carrée. |
--mgl-ring |
3px solid #fff | Bordure de la loupe, à accorder à votre charte. |
--mgl-width · --mgl-ratio · --mgl-radius |
280px · 7 / 5 · 0.75rem | Largeur maximale du cadre (il rétrécit sur petit écran), proportions et arrondi. 100% pour une image pleine largeur. |
Légende .mgl-label |
« Move Mouse » | Texte posé au centre de l'image. Supprimez le <span> sur une vraie photo. |
FAQ
<img> (ou data-zoom-src) au moment où la loupe s'ouvre. Si vous changez la photo par script, la loupe suit dès que la nouvelle image est chargée.data-zoom-src.--mgl-shape: 0 (ou 4px pour adoucir les coins) sur la racine. Le calcul du zoom ne change pas, seule la forme du disque change.
