I'm trying to create a zoom effect when we mouse over some image, like when you buy some product on Amazon. The code actually works, but it has two errors:
it doesn't always do the image change when it's on the second image and you want to go back to the first one it keeps zooming to the second one and not to the first one where the mouse is.
The square where we indicate which part is being enlarged, is repeated and does not move well, it only stays in the first image and does not pass if I move the mouse to the second image, even so, the image is displayed well in the box.
Does anyone know why? If you know some simpler code, that's also welcome since I'm doing tests. I don't want libraries, just JavaScript, and this could have x images, sometimes 2, sometimes 3.
I took this code and adopted it: https://www.w3schools.com/howto/howto_js_image_zoom.asp
Example in: JSFiddle
My code:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the 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;
}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0,
y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {
x: x,
y: y
};
}
}
let img = document.querySelectorAll('.item-img')
img.forEach(function(item, idx) {
item.addEventListener('mousemove', function(e) {
let x = e.target.dataset.id
console.log(x)
// Initiate zoom effect:
imageZoom(x, "myresult");
})
})* {
box-sizing: border-box;
}
.img-zoom-container {
display: block;
position: relative;
width: 100%;
height: auto;
}
.img-zoom-lens {
border: 1px solid #cccccc;
position: absolute;
/*set the size of the lens:*/
width: 100px;
height: 100px;
}
.item-img {
border: 1px solid red;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 350px;
height: 350px;
position: absolute;
left: 400px;
top: 0;
}<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" data-id="myimage" class="item-img" src="https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_1280.jpg" width="350" height="290">
<br>
<img id="myimage1" data-id="myimage1" class="item-img" src="https://cdn.pixabay.com/photo/2013/11/15/13/57/road-210913_1280.jpg" width="350" height="290">
<div id="myresult" class="img-zoom-result"></div>
</div>
Part of the errors is that the function
w3schoolsis already ready to receiveidthe image and theidresulting container, therefore, you do not need to enclose it inside theaddEventListener. In fact, what causes so many errors in your script is precisely that every time you move the mouse you add a new event to the container.On the other hand, the way it is designed, you must necessarily enclose each image in a container with the class
img-zoom-container. Thedivresult if you can put it where you like.I attached the corrected script. I put a
hoveron the edge of the lens box so that it would only come out when the mouse was over it, it seemed more practical that way, but if you don't like it, reset your styles as at the beginning, it still works without any problem.