0

quiero hacer una preview de imágenes como lo que tiene Amazon cuando abres un producto y tienes las imágenes en pequeño, y al hacer hover sobre cada una, esta se visualiza en grande.

Había pensado en hacer algo con CSS, pero al estar las imágenes que se van a ver en grande dentro de un div, no śe si es posible hacer un selector para ello, así que opté por usar un event listener en JS.

<div class="item__image-container">
    <img class="item__image item__image--1 item__image--small" src="1000w-opt.jpg" alt="" />
    <img class="item__image item__image--2 item__image--small" src="2000w-opt.jpg" alt="" />
    <img class="item__image item__image--3 item__image--small" src="3000w-opt.jpg" alt="" />
    <img class="item__image item__image--4 item__image--small" src="" alt="" />
    <div class="item__image-container-preview">
        <img class="item__image item__image--1 item__image--preview item__image--current" src="1000w-opt.jpg" alt="" />
        <img class="item__image item__image--2 item__image--preview" src="2000w-opt.jpg" alt="" />
        <img class="item__image item__image--3 item__image--preview" src="3000w-opt.jpg" alt="" />
        <img class="item__image item__image--4 item__image--preview" src="" alt="" />
    </div>
</div>

La función que creé lo que hace es que cuando item__image--small es hover, entonces item__image--preview tenga opacity = 1

let imageSmall = document.getElementsByClassName("item__image--small");

for(i = 0; i < imageSmall.length; i++) {

    var imagePreview = document.getElementsByClassName("item__image--preview")[i];

    imageSmall[i].addEventListener("mouseover", () => {
        imagePreview.style.opacity = "1";
    });

    imageSmall[i].addEventListener("mouseout", () => {
        imagePreview.style.opacity = "0";
    });
} 

El problema es que no sé cómo lograr que cuando llame la función en la imagen 1, corresponda a la preview de la imagen 1.

1 respuesta 1

0

Intenta esto.

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<div class="item__image-container">
  <img class="item__image item__image--1 item__image--small" src="ada.png" alt="" />
  <img class="item__image item__image--2 item__image--small" src="ae.png" alt="" />
  <img class="item__image item__image--3 item__image--small" src="adx.png" alt="" />
  <img class="item__image item__image--4 item__image--small" src="ardr.png" alt="" />

  <div class="item__image-container-preview">
      <img class="item__image item__image--1 item__image--preview item__image--current" src="ada.png" alt="" />
      <img class="item__image item__image--2 item__image--preview" src="ae.png" alt="" />
      <img class="item__image item__image--3 item__image--preview" src="adx.png" alt="" />
      <img class="item__image item__image--4 item__image--preview" src="ardr.png" alt="" />
  </div>
</div>

<script type="text/javascript">
    let imageSmall = document.getElementsByClassName("item__image--small");

    for(i = 0; i < imageSmall.length; i++) {
        let imagePreview = document.getElementsByClassName("item__image--preview")[i];

        imageSmall[i].addEventListener("mouseover", () => {
            imagePreview.style.opacity = "1";
        });

        imageSmall[i].addEventListener("mouseout", () => {
            imagePreview.style.opacity = "0";
        });
    } 
</script>
</body>
</html>

Lo unico que cambio respecto al código que tenías fue:

let imagePreview = document.getElementsByClassName("item__image--preview")[i];

así, al declarar imagePreview tipo let, se crea de manera local y no global.
espero sea lo que estabas buscando, a mi me funciono bien, intentalo tu.

2
  • Asombroso! gracias! el 28 ene. 2020 a las 20:49
  • Con mucho gusto :)
    – Vessper
    el 29 ene. 2020 a las 1:12

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.