0

Necesito que al clickear en la flecha correspondiente (der/izq) el visualizador cambie de imagen... Lo quiero hacer en JavaScript. Estoy aprendiendo programación... Ahí va mi código (éste hasta ahora sólo me amplía la imagen seleccionada para visualizarla):

const hamburguer1 = document.querySelector(".hamburger");
const imagenes = document.querySelectorAll(".img-galeria");
const imagenesLight = document.querySelector(".agregar-imagen");
const contenedorLight = document.querySelector(".imagen-light");


const aparecerImagen = (imagen)=>{
      imagenesLight.src = imagen;
      contenedorLight.classList.toggle("show");
      imagenesLight.classList.toggle("showImage");
}

imagenes.forEach(imagen =>{
      imagen.addEventListener("click", ()=> {
      aparecerImagen(imagen.getAttribute("src"));
      })
})

contenedorLight.addEventListener("click", (e)=>{
    if(e.target !== imagenesLight) {
        contenedorLight.classList.toggle("show");
        imagenesLight.classList.toggle("showImage");
    } 
})

imagenes.forEach(img =>{
      flecha.addEventListener("click", ()=> {
        aparecerImagen(images[img]);
    })
})

La Section involucrada del código es:

<section class="gallery" id="actualidad">
        <div class="contenedor">
            <h2 class="subtitulo">Galería</h2>
            <div class="contenedor-galeria">
                <img src="uno.jpg" alt="" class="img-galeria" id="img1">
                <img src="dos.jpg" alt="" class="img-galeria" id="img2">
                <img src="tres.jpg" alt="" class="img-galeria" id="img3">
                <img src="cuatro.jpg" alt="" class="img-galeria" id="img4">
                <img src="cinco.jpg" alt="" class="img-galeria" id="img5">
                <img src="seis.jpg" alt="" class="img-galeria" id="img6">
            </div>
            </h2>
        </div>
    </section>
    <section class="imagen-light">
        <img src="comment-x-regular-24.png" alt="" class="close">
        <img src="flecha-hacia-izquierda.png" alt="" class="flecha"> /* Flecha hacia la 
izquierda */ 
        <img src="" alt="" class="agregar-imagen"> 
        <img src="flecha-hacia-derecha.png" alt="" class="flecha"> /* esta sería la flecha 
hacia la derecha */ 
    </section> 

Me gustaría saber qué función puedo crear para que al clickear las flechitas me cambie de imagen. Son seis imágenes en total. Los estilos de css de las clases intervinientes son:

.flecha {
    width: 60px;
    padding: 20px;
    cursor: pointer;
}
.hamburger {
    position: fixed;
    z-index: 10;
    top: 30px;
    right: 30px;
    background: transparent;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}
.gallery {
    background: #f2f2f2;
}

.contenedor-galeria {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.img-galeria {
    width: 30%;
    object-fit: cover;
    display: block;
    margin-bottom: 15px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    cursor: pointer;
}

.imagen-light {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(100%);
    transition: transform .2s ease-in-out;
}
.show {
    transform: translate(0);
}
.agregar-imagen {
    width: 60%;
    object-fit: cover;
    transform: scale(0);
    transition: transform .3s .2s;
}

.showImage {
    transform: scale(1);
}

.close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    cursor: pointer;
}

Al código lo fui generando a partir de un video de YouTube donde te enseñan a crear una página web con html, css & JavaScript. Pero no muestra esa partecita importante en la visualización de las imágenes.

1 respuesta 1

0

Primero le pones un identificados a las flechas: id="flechaDer" (avanzar, ir a la derecha) y id="flechaIzq" (retroceder, ir a la izquierda).
Crearía una función para determinar el índice de la imagen actual. A cada flecha le pondría un evento para que pase a la imagen isguietne o anterior a la actual.

//Busca el indice de la imagen que se está mostrando en este momento
function imgActual()
   {
     var actual = imagenesLight;
     for(i=0; i<imagenes.length; i++){
        if(imagenesLight.src === imagenes[i].src)
            break;
        }
    if(i=== imagenes.length) i=0;    //si no hay imagen mostrándose
         return i    
   }

document.getElementById('flechaIzq').addEventListener("click", ()=> {
        let actual = imgActual();  
        if( actual >0) actual--;
        aparecerImagen(imagenes[actual].src);
        })
document.getElementById('flechaDer').addEventListener("click", ()=> {
        let actual = imgActual();  
        if (actual < imagenes.length-1) actual++
             aparecerImagen(imagenes[actual].src);
        })

Es prácticamente un carrusel.

9
  • Muchas gracias! Lo que noto es que este método que me pasaste sólo me deja cambiar una sola vez de imagen. Igualmente me sirvió mucho de guía!
    – Pilu
    el 30 jul. 2021 a las 13:47
  • De nada. Y si puedes mover desde la imagen mostrada hacia adelante o atrás, más de una vez. Míralo en aquí funcionando
    – Juan
    el 30 jul. 2021 a las 14:57
  • A mi no me estaría funcionando; te paso la página que tiene la galería a ver si podes ver mi error... piliansa.github.io/riouruguay
    – Pilu
    el 30 jul. 2021 a las 15:08
  • Has quitado el break del bucle de buscar actual. Si lo quitas i siempre vas a recorrer todo la lista de imágenes. Lo he puesto para que no recorra toda la lista, pues cuando encuentra la imagen actual ese valor de i es el índice de la que está mostrándose.
    – Juan
    el 30 jul. 2021 a las 15:34
  • perdón lo había comentado para probar otra cosa. Sigue sin funcionar, ahí cargué el break.
    – Pilu
    el 30 jul. 2021 a las 16:11

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.