Les articles de votre blog ici ? Inscrivez votre blog !

Comment construire une loupe d’image avec Vanilla JavaScript

Publié le 12 juillet 2023 par Mycamer

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.

Vidéo MUO du jour

FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU

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 :

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Magnifier</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</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”.

 <body>
  <div class="header">
  <h1>Image Magnifier</h1>
  <span>Press <strong>Arrow Up</strong> or <strong>Arrow Down</strong> to
  increase or decrease athe zoom level.</span>
  <span>Zoom Level: <strong class="zoom-level">1</strong></span>
  </div>
  <div class="container">
  <div class="magnifier hidden"></div>
  </div>
  <script src="/main.js"></script>
</body>

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:

 :root {
  --magnifier-width: 150;
  --magnifier-height: 150;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container {
  width: 400px;
  height: 300px;
  background-size: cover;
  background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
  background-repeat: no-repeat;
  position: relative;
  cursor: none;
}
.magnifier {
  border-radius: 400px;
  box-shadow: 0px 11px 8px 0px #0000008a;
  position: absolute;
  width: calc(var(--magnifier-width) * 1px);
  height: calc(var(--magnifier-height) * 1px);
  cursor: none;
  background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
  background-repeat: no-repeat;
}
span {
  display: block;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hidden {
  visibility: hidden;
}
div > span:nth-child(3) {
  font-size: 20px;
}

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écipientrespectivement.

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 loupeLargeuret la hauteur extraite à loupeHauteur.

 let magnifier = document.querySelector(".magnifier");
let container = document.querySelector(".container");
let magnifierWidth = getComputedStyle(magnifier).width.substring(
  0,
  getComputedStyle(magnifier).width.indexOf("p")
);
let magnifierHeight = getComputedStyle(magnifier).width.substring(
  0,
  getComputedStyle(magnifier).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.

 let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;

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.

 function getZoomLevel() {
  return zoom;
}
function getPointerPosition() {
  return { x: pointerX, y: pointerY }
}

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.

 function updateMagImage() {
  let evt = new MouseEvent("mousemove", {
  clientX: getPointerPosition().x,
  clientY: getPointerPosition().y,
  bubbles: true,
  cancelable: true,
  view: window,
  });
  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.

 window.addEventListener("keyup", (e) => {
  if (e.key === "ArrowUp" & maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
  zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
  zoom = zoom + 0.3;
  updateMagImage();
  }
  if (e.key === "ArrowDown" & !(zoomLevelLabel.textContent <= 1)) {
  zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
  zoom = zoom - 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 “masquée” de l’élément loupe pour la rendre visible et calcule la position de la souris par rapport au conteneur en tenant compte du défilement de la page.

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 position de la souris.

 container.addEventListener("mousemove", (e) => {
  magnifier.classList.remove("hidden");
  let rect = container.getBoundingClientRect();
  let x = e.pageX - rect.left;
  let y = e.pageY - rect.top;
  x = x - window.scrollX;
  y = y - window.scrollY;
  magnifier.style.transform = `translate(${x}px, ${y}px)`;
  const imgWidth = 400;
  const imgHeight = 300;
  magnifier.style.backgroundSize =
  imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px";
  magnifyX = x * getZoomLevel() + 15;
  magnifyY = y * getZoomLevel() + 15;
  magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";
});

Ajoutez ensuite un autre écouteur d’événement à l’élément conteneur, mais cette fois, l’écouteur d’événement doit écouter l’événement “mouseout” et ajouter la classe “hidden” à l’élément magnifier chaque fois que la souris est hors de la zone de conteneur.

 container.addEventListener("mouseout", () => {
  magnifier.classList.add("hidden");
});

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.

 window.addEventListener("mousemove", (e) => {
  pointerX = e.clientX;
  pointerY = 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.

to www.makeuseof.com

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931