Comment construire une loupe d'image avec Vanilla JavaScript

Si vous avez déjà parcouru un site Web d'achat, vous avez probablement rencontré la fonction de loupe d'image. Il vous permet de zoomer sur une partie spécifique d'une image pour une vue plus rapprochée. L'intégration de cette fonctionnalité petite mais percutante peut grandement améliorer l'expérience utilisateur sur votre propre site Web.

Construire une loupe d'image de manière transparente et cohérente peut être un défi. Mais suivre ces étapes vous aidera à créer votre propre loupe d'image à partir de zéro, sans avoir besoin de vous fier à des plugins tiers.

Quand utiliser une loupe d'image dans votre projet Web

Une loupe d'image peut être utile lorsque vous construisez un projet avec beaucoup d'images. Comme mentionné précédemment, les loupes d'image sont très populaires auprès des sites Web d'achat, car l'utilisateur peut parfois avoir besoin d'examiner de plus près le produit avant de décider s'il vaut la peine d'être acheté.

Les clients se fient uniquement aux informations et visuels fournis par le site Web pour évaluer la qualité, les caractéristiques et l'apparence d'un produit. Cependant, les images statiques seules peuvent ne pas toujours fournir une clarté suffisante ou permettre une évaluation complète de l'élément.

Dans les magasins traditionnels, les clients peuvent physiquement manipuler les produits, les examiner de près et évaluer leur adéquation avant d'acheter. Les loupes d'image tentent de recréer cette expérience en offrant aux utilisateurs un niveau similaire d'examen et d'examen virtuel.

Les loupes d'image peuvent également être utiles si vous êtes créer une application de galerie de photos puisque le zoom sur une partie spécifique de l'image est une caractéristique importante.

Construire la loupe d'image

Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT.

Créez un dossier et, dans ce dossier, ajoutez un index.html déposer, style.css fichier et main.js déposer. Ajoutez ce code passe-partout à index.html :

html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0" />
<titre>Loupe d'imagestitre>
<lienrel="feuille de style"href="style.css" />
diriger>
<corps>
corps>
html>

À l'intérieur de corps tag, créez un élément div avec le nom de classe "header". Ensuite, dans la div "header", ajoutez un h1 élément d'en-tête pour afficher le titre de votre loupe d'image.

Vous pouvez personnaliser le texte en fonction de vos besoins. Ensuite, incluez deux éléments span qui fournissent des instructions pour l'utilisation de la loupe et affichent le niveau de zoom actuel à l'utilisateur.

Après la section d'en-tête, créez un div élément avec le nom de classe "container". À l'intérieur de cette div, ajoutez un autre élément div avec le nom de classe "magnifier" et appliquez la classe "hidden" pour le masquer.

Cet élément représentera l'image de la loupe. Ensuite, ajoutez une balise de script avec l'attribut "src" défini sur "/main.js".

<corps>
<divclasse="entête">
<h1>Loupe d'imagesh1>
<portée>Presse <fort>Flèche vers le hautfort> ou <fort>Flèche vers le basfort> pour
 augmenter ou diminuer le niveau de zoom.portée>
<portée>Le niveau de zoom: <fortclasse="le niveau de zoom">1fort>portée>
div>
<divclasse="récipient">
<divclasse="loupe cachée">div>
div>
<scénariosrc="/main.js">scénario>
corps>

Remplacez le code dans le style.css fichier avec ce qui suit. Vous pouvez également utiliser un Préprocesseur CSS comme Less si tu veux:

:racine {
--loupe-largeur: 150;
--loupe-hauteur: 150;
}
corps {
afficher: fléchir;
flex-direction: colonne;
aligner les éléments: centre;
}
.récipient {
largeur: 400pixels;
hauteur: 300pixels;
taille d'arrière-plan: couverture;
image de fond: URL("https://CDN.pixabay.com/photo/2019/03/27/15/24/animaux-4085255_1280.jpg");
Répétition du fond: sans répétition;
position: relatif;
le curseur: aucun;
}
.loupe {
rayon de bordure: 400pixels;
boîte ombre: 0pixels 11pixels 8pixels 0pixels#0000008a;
position: absolu;
largeur: calc(var(--loupe-largeur) * 1pixels);
hauteur: calc(var(--loupe-hauteur) * 1pixels);
le curseur: aucun;
image de fond: URL("https://CDN.pixabay.com/photo/2019/03/27/15/24/animaux-4085255_1280.jpg");
Répétition du fond: sans répétition;
}
portée {
afficher: bloc;
}
.entête {
afficher: fléchir;
flex-direction: colonne;
aligner les éléments: centre;
}
.caché {
visibilité: caché;
}
div > portée:nième-enfant (3) {
taille de police: 20pixels;
}

Dans le main.js fichier, récupérez les éléments HTML avec les noms de classe, "loupe" et "conteneur" en utilisant le document.querySelector méthode et les affecter aux variables loupe et récipient, respectivement.

Ensuite, en utilisant le getComputedStyle fonction récupérer le largeur et hauteur de l'élément loupe, puis extrayez les valeurs numériques des chaînes renvoyées à l'aide de la sous-chaîne et Indice de méthodes.

Attribuez la largeur extraite à la variable loupeLargeur, et la hauteur extraite à loupeHauteur.

laisser loupe = document.querySelector(".loupe");
laisser conteneur = document.querySelector(".récipient");
laisser magnifierWidth = getComputedStyle (loupe).width.substring(
0,
 getComputedStyle (loupe).width.indexOf("p")
);
laisser magnifierHeight = getComputedStyle (loupe).width.substring(
0,
 getComputedStyle (loupe).height.indexOf("p")
);

Ensuite, configurez les variables pour le niveau de zoom, le niveau de zoom maximum et les positions du curseur et de l'image de la loupe.

laisser zoomLevelLabel = document.querySelector(".le niveau de zoom");
laisser zoom = 2;
laisser maxNiveauZoom = 5;
laisser pointeurX ;
laisser pointeurY ;
laisser magnifierX ;
laisser magnifierY ;

Dans le bloc de code ci-dessus, pointeurX et pointeurY les deux représentent la position du curseur le long des axes X et Y.

Maintenant, définissez deux fonctions d'assistance: obtenirNiveauZoom qui renvoie le niveau de zoom actuel, et getPointerPosition qui retourne un objet avec le X et y coordonnées du curseur.

fonctionobtenirNiveauZoom() {
retour Zoom;
}
fonctiongetPointerPosition() {
retour { X: pointeurX, y: pointeurY }
}

Ensuite, créez ajouter un updateMagImage fonction qui crée un nouvel objet MouseEvent avec la position actuelle du curseur et l'envoie à l'élément conteneur. Cette fonction est responsable de la mise à jour de l'image de la loupe.

fonctionupdateMagImage() {
laisser ev = nouveau SourisEvénement("déplacer la souris", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bulles: vrai,
 annulable: vrai,
 voir: fenêtre,
 });
 container.dispatchEvent (evt);
}

Maintenant, vous devez ajouter un écouteur d'événement à l'objet fenêtre pour l'événement "keyup" qui ajuste le niveau de zoom lorsque l'utilisateur appuie sur les touches "ArrowUp" ou "ArrowDown".

La fonction de rappel sur l'événement "keyup" est également responsable de la mise à jour de l'étiquette du niveau de zoom et du déclenchement de la updateMagImage fonction.

fenêtre.addEventListener("keyup", (e) => {
si (e.clé "Flèche vers le haut" && maxNiveauZoom - Nombre(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 agrandir = agrandir + 0.3;
 updateMagImage();
 }
si (e.clé "Flèche vers le bas" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 agrandir = agrandir - 0.3;
 updateMagImage();
 }
});

Ajoutez ensuite un écouteur d'événement à l'élément conteneur pour l'événement "mousemove".

​​​​​​

Dans la fonction de rappel, ajoutez la fonctionnalité qui supprime la classe "cachée" de l'élément loupe à le rendre visible et calcule la position de la souris par rapport au conteneur, en faisant défiler la page dans compte.

Cette fonction doit également définir le style de transformation de la loupe sur la position calculée, et déterminer la taille et la position de l'arrière-plan de l'image de la loupe en fonction du niveau de zoom et de la souris position.

conteneur.addEventListener("déplacer la souris", (e) => {
 magnifier.classList.remove("caché");
laisser rect = container.getBoundingClientRect();
laisser x = e.pageX - rect.gauche ;
laisser y = e.pageY - rect.top ;
 x = x - fenêtre.scrollX ;
 y = y - fenêtre.scrollY ;
 magnifier.style.transform = `traduire(${x}pixels, ${y}pixels)`;
constante imgLargeur = 400;
constante imgHauteur = 300;
 loupe.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -magnifierY + "px";
});

Ajoutez ensuite un autre écouteur d'événement à l'élément conteneur, mais cette fois l'écouteur d'événement doit écouter le événement "mouseout" et ajoutez la classe "hidden" à l'élément loupe chaque fois que la souris est hors du conteneur zone.

conteneur.addEventListener("mouse out", () => {
 magnifier.classList.add("caché");
});

Enfin, ajoutez un écouteur d'événement à l'objet window pour l'événement "mousemove" qui met à jour les positions x et y du curseur.

fenêtre.addEventListener("déplacer la souris", (e) => {
 pointeurX = e.clientX ;
 pointeurY = e.clientY ;
});

C'est ça! Vous avez réussi à créer une loupe d'image avec du JavaScript vanille.

Comment les loupes d'image améliorent l'expérience utilisateur

En permettant aux utilisateurs de zoomer sur des zones spécifiques d'une image, une loupe leur permet d'examiner les détails du produit avec plus de clarté.

Ce niveau amélioré d'exploration visuelle inspire confiance aux utilisateurs car ils peuvent prendre des décisions éclairées. Cela peut contribuer à augmenter les taux de conversion et à améliorer la fidélisation des clients.