Comment Faire un Zoom sur Image en utilisant CSS et Javascript?
Le zoom sur image est l’une des fonctionnalités les plus utiles qu’une page web peut avoir. Vous pouvez en créer une assez attrayante en utilisant CSS et Javascript. Si vous êtes intéressés faisons-le ensemble!
1. Créez HTML
Comme toujours, on doit créer un code HTML comme base. Créez l’élément <div> comme conteneur et lui donnez une classe. Vient ensuite l’image à laquelle le zoom sera appliqué plus tard. On met l’image en utilisant la balise HTML <img> avec ses attributs appropriés.
<div class="img-zoom-container">
<img id="theimage" src="/uploads/media/default/0001/03/d670346cbbbda5cc6a629e275f87fd53d58ebc51.jpeg" width="300" height="240" alt="House">
<div id="myresult" class="img-zoom-result"></div>
</div>2. Ajoutez CSS
Ici, la chose la plus importante est que le conteneur doit avoir un positionnement relatif, donc définissez la propriété CSS position à sa valeur “relative”. Le résultat peut être placé n’importe où sur la page, mais il doit avoir une classe nommée "img-zoom-result".
L’image et le résultat doivent avoir des ID qui seront utilisés quand un JavaScript lance l’effet de zoom.
Les propriétés CSS border, width et height sont utilisées pour styliser le petit zoom carré (lentille) sur l’image et le conteneur de résultat.
Voyons le code:
* {
box-sizing: border-box;
}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*définissez la taille de la lentille:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*définissez la taille du résultat DIV:*/
width: 300px;
height: 300px;
}3. Créez JavaScript
Voyez le code ci-dessous pour savoir tout ce qu’on doit faire à l’aide de Javascript.
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/* Créez la lentille: */
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/* mettez la lentille: */
img.parentElement.insertBefore(lens, img);
/* Calculez le rapport entre le résultat et la lentille: */
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/* Définissez les propriétés de fond pour le résultat DIV */
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/* Exécutez une fonction lorsque quelqu’un déplace le curseur sur l’image ou sur la lentille: */
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/* La fonction ci-dessus pour les écrans tactiles: */
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/* Empêchez toute autre action qui pourrait se produire pendant le déplacement sur l’image */
e.preventDefault();
/* Obtenez les positions x et y du curseur: */
pos = getCursorPos(e);
/* Calculez la position de la lentille: */
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/* Empêchez la lentille d’être positionnée à l’extérieur de l’image: */
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/* Mettez la position de la lentille: */
lens.style.left = x + "px";
lens.style.top = y + "px";
/* Affichez ce que la lentille "voit": */
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/* Obtenez les positions x et y de l’image: */
a = img.getBoundingClientRect();
/* Calculez les coordonnées x et y du curseur par rapport à l’image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Envisagez tout défilement de page: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}La dernière chose à faire est de lancer l’effet de zoom, qui est fait comme ceci:
<script>
imageZoom("myimage", "myresult");
</script>Maintenant, mettons tout cela ensemble et essayons ce qu’on a créé!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
box-sizing: border-box;
}
.img-zoom-conatiner {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*mettez la taille de la lentille:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*mettez la taille du résultat div:*/
width: 150px;
height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*créez la lentille:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*mettez la lentille:*/
img.parentElement.insertBefore(lens, img);
/*calculez le ratio entre le résultat DIV and la lentille:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*définissez les propriétés de fond pour le résultat DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = img.width * cx + "px " + img.height * cy + "px";
/*Exécutez une fonction lorsque quelqu’un déplace le curseur sur l’image ou sur la lentille:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*et aussi pour les écrans tactiles:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*empêchez toute autre action pouvant se produire pendant le déplacement sur l’image:*/
e.preventDefault();
/*obtenez les positions x et y du curseur:*/
pos = getCursorPos(e);
/*calculez la position de la lentille :*/
x = pos.x - lens.offsetWidth / 2;
y = pos.y - lens.offsetHeight / 2;
/*empêchez la lentille d’être positionnée à l’extérieur de l’image:*/
if (x > img.width - lens.offsetWidth) {
x = img.width - lens.offsetWidth;
}
if (x < 0) {
x = 0;
}
if (y > img.height - lens.offsetHeight) {
y = img.height - lens.offsetHeight;
}
if (y < 0) {
y = 0;
}
/*mettez la position de la lentille:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*affichez ce que la lentille “voit”":*/
result.style.backgroundPosition = "-" + x * cx + "px -" + y * cy + "px";
}
function getCursorPos(e) {
var a,
x = 0,
y = 0;
e = e || window.event;
/*obtenez les positions x et y de l’image:*/
a = img.getBoundingClientRect();
/*calculez les coordonnées x et y du curseur par rapport à l’image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*considérez tout défilement de page:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return { x: x, y: y };
}
}
</script>
</head>
<body>
<h1>Image Zoom</h1>
<p>Souris sur l’image:</p>
<div class="img-zoom-container">
<img id="myimage" src="/uploads/media/default/0001/03/d670346cbbbda5cc6a629e275f87fd53d58ebc51.jpeg" width="300" height="240" />
<div id="myresult" class="img-zoom-result"></div>
</div>
<script>
// lancez l’effet de zoom:
imageZoom("myimage", "myresult");
</script>
</body>
</html>Voyons maintenant un autre exemple sous une lentille différente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8" />
<title>Le titre du document</title>
<script src="https://unpkg.com/[email protected]/js-image-zoom.js" type="application/javascript"></script>
</head>
<body>
<div id="img-container" style="width: 400px;">
<img src="https://assets.architecturaldesigns.com/plan_assets/324992268/large/23703JD_01_1553616680.jpg?1553616681" />
</div>
<script>
var options = {
width: 400,
zoomWidth: 500,
offset: { vertical: 0, horizontal: 10 },
};
new ImageZoom(document.getElementById("img-container"), options);
</script>
</body>
</html>