Estoy intentando crear un efecto de zoom cuando pasamos el mouse sobre alguna imagen, tipo cuando compras algún producto en Amazon. En si el código funciona, pero tiene dos errores:
no siempre hace el cambio de imagen cuando está en la segunda imagen y quieres ir otra vez al primero sigue dando el zoom al segundo y no al primero donde se encuentra el mouse.
El cuadrado donde indicamos que parte se está ampliando, se repite y no se mueve bien, solo se queda en la primera imagen y no pasa si paso el mouse a la segunda imagen, aun así, la imagen si se muestra bien en el cuadro.
¿Alguien sabe el por qué? Si saben algún código más simple, también es bienvenido ya que estoy haciendo pruebas. No quiero librerías, solo JavaScript, y este podría tener x imágenes, a veces 2, otras 3.
Cogí este código y lo adopté: https://www.w3schools.com/howto/howto_js_image_zoom.asp
Ejemplo en: JSFiddle
Mi codigo:
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>