1

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:

  1. 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.

  2. 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>

1 respuesta 1

2

Parte de los errores está en que la función de w3schools ya está lista para recibir el id de la imagen y el id del contenedor resultante, por tanto, no necesitas encerrarla dentro del addEventListener. De hecho, lo que causa tantos errores en tu script es precisamente que cada vez que mueves el mouse agregas un nuevo evento al contenedor.

Por otro lado, de la manera que está diseñado, debes necesariamente que encerrar cada imagen en un contenedor con la clase img-zoom-container. El div de resultado si puedes ponerlo donde gustes.

Te adjunto el script corregido. Le puse un hover al borde de la caja del lente para que solo saliera cuando el mouse estuviera encima, me pareció más práctico así, pero si no te gusta restablece tus estilos como al inicio, igual funciona sin ningún problema.

function imageZoom(imgID, resultID) {
  let 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;
  /*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) {
    let pos, x, y;
    /*set background properties for the result DIV:*/
    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    /*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) {
    let 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) {
    console.log(item.id)
    // Initiate zoom effect:
    imageZoom(item.id, "myresult");
})
* {
  box-sizing: border-box;
}

.img-zoom-container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.img-zoom-lens {
  position: absolute;
  /*set the size of the lens:*/
  width: 100px;
  height: 100px;
}

.img-zoom-lens:hover {
 border: 1px solid #cccccc;
}

.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">
  <div id="myresult" class="img-zoom-result"></div>
</div>

<div class="img-zoom-container">
  <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>

5
  • Hola, amigo, gracias por responder. Se ha solucionado que ahora parece bien el cuadrado del zoom en las dos imágenes, pero sigue teniendo un error, fíjate en tu ejemplo que solo muestra el zoom de la segunda imagen, aunque se pasa el ratón por la primera imagen sigue mostrando el segundo. ¿Sabes el motivo?
    – D.Bulten
    Commented el 7 dic. 2021 a las 11:17
  • Si vuelvo añadir la función con addlistener pero con mouseover, sí que cambia, pero sigue haciendo el fallo del punto 1. de mi pregunta, si estas encima de la imagen 1 y vas al 2 este no siempre cambia la imagen del zoom en myresult, es decir, aunque estas en la imagen 2, sigue mostrando el 1. Lo hace en verdad me he fijado si vuelves a la misma posición con el mouse una y otra vez. Si pruebas cambiando varias veces de imagen veras el fallo.
    – D.Bulten
    Commented el 7 dic. 2021 a las 12:25
  • @DBE no me había percatado de ese detalle. De cualquier forma ya lo arreglé. Tenía que ver con que las funciones solo leían la última instancia de result. Cualquier otra cosa me dices.
    – Jaime
    Commented el 7 dic. 2021 a las 17:20
  • 1
    La solución era simplemente mover lo del background adentro de moveLens
    – Jaime
    Commented el 7 dic. 2021 a las 17:27
  • 1
    Lo acabo de probar, y ahora si funciona perfectamente, luego comparo los códigos para ver los cambios y el fallo, ¡muchas gracias!
    – D.Bulten
    Commented el 7 dic. 2021 a las 17:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.