1

Estoy haciendo una web en la que quiero hacer una galería y quiero que este javascript me sirva para crear un pop up por imagen. Pero le cambio el nombre del id a #open2 #close2 #modal_container2 y no me funciona. ¿Alguien sabe que puede ser? La pregunta no es como hacer la galería, si no cómo hacer que el modal me sirva para cada foto. Creo que el problema está en

addEventListener('click'

Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.

const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open.addEventListener('click', () => {
  modal_container2.classList.add('show2');
});

close.addEventListener('click', () => {
  modal_container2.classList.remove('show2');
});
  .modal-container2 {
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  position: fixed;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 100vw;
  opacity: 0;
  z-index: 2;
  vertical-align: middle;
}

.show2 {
  pointer-events: auto;
  opacity: 1;
  z-index: 2;
}

.centrate {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
<li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
  <a href="#" id="open2">
    <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."
      /></div>
  </a>
  <span class="portfolio-item-title">Lorem ipsum.</span>
</li>


<div class="modal-container2" id="modal_container2">
  <div class="centrate">
    <img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
    <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
    <button id="close2" href="#">Cerrar</button>
  </div>
</div>

8
  • Cuando le das click a la imagen aparece el modal?, o sea aparece la imagen con el texto debajo y demas
    – JoseMgz_Ux
    Commented el 14 nov. 2022 a las 13:41
  • Sí, el problema está cuando quieres hacer una galería de imagenes y que esto funcione para cada imagen y que el pop up cambie en función de la imagen
    – Mar
    Commented el 14 nov. 2022 a las 13:44
  • Creo que ya vi si agregas otra imagen no funciona como la primera
    – JoseMgz_Ux
    Commented el 14 nov. 2022 a las 13:46
  • 1
    He editado la pregunta y creo que ahora se entiende mejor
    – Mar
    Commented el 14 nov. 2022 a las 14:00
  • @Mar: Bien hecho, tan solo recuerda pulsar el botón Ordenar cuando lo pongas en un snippet para que no se muestren tantos espacios que dificultan la lectura
    – masterguru
    Commented el 14 nov. 2022 a las 14:04

1 respuesta 1

1

El en HTML se agregó un div (gallery) que va a contener todas las imágenes o sea los ul con sus li como también añadí sus respectivas clases (Cambie los IDs por clases) que me ayudaran a gestionarlo el js.

HTML

<div class="gallery">
        <ul class="thumbItems">
            <li data-wow-delay="0.4s">
                <a href="#" id="open">
                    <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                </a>    
                    <span class="portfolio-item-title">Lorem ipsum.</span>
            </li>
            <li data-wow-delay="0.4s">
                <a href="#" id="open">
                    <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                </a>    
                    <span class="portfolio-item-title">Lorem ipsum.</span>
            </li>
        </ul> 
        <div class="modal-container" id="modal_container">
            <div class="centrate">
              <img title="modal" src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
              <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
              <button id="close" href="#">Cerrar</button>
            </div>
          </div>  
    </div>

JavaScript

Si vez solo capture la clase de gallery que es el div que contiene las imágenes y utilice querySelectorAll porque son clases y no getElementById.

Luego como es un querySelectorAll este devuelve un objeto similar a una matriz denominado lista de nodos. Luego esa lista de nodos la recorro con un forEach y capturo el evento click de cada imagen.

querySelector:

Retorna el primer elemento que cumpla con el criterio dado. Puede ser invocada sobre el document o sobre algún elemento. En caso de usarse sobre un elemento, las búsqueda se limita a los hijos de ese elemento. Si la búsqueda no encuentra nada, retorna null.

querySelectorAll:

Retorna todos los elementos que cumplan con el criterio dado. Al igual que querySelector puede ser invocada sobre el document o sobre algún elemento. Siempre retorna un NodeList, el cual no es una array con todas las de la ley (map, reduce, indexOf, etc), pero pude convertirse en uno, con facilidad.

const gallery = document.querySelectorAll(".thumbItems")
    const close = document.getElementById('close');

        gallery.forEach((item) => {
            item.addEventListener("click", function() {
                modal_container.classList.add('show');
            });
        })

    close.addEventListener('click', () => {
        modal_container.classList.remove('show');
    });

CSS (Se quedo igual)

 .modal-container{
            background: rgba(0,0,0,0.75);
            align-items: center;
            justify-content: center;
            position: fixed;
            pointer-events: none;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100vh;
            width: 100vw;
            opacity: 0;
            z-index: 2;
            vertical-align: middle;
            }  

        .show{
            pointer-events: auto;
            opacity: 1;
            z-index: 2;
        }
           
        .centrate{
            margin: 0;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
3
  • 1
    Esto es definitivamente mucho más sencillo de cómo lo estaba haciendo. Gracias
    – Mar
    Commented el 14 nov. 2022 a las 14:25
  • Qué bueno, me alegro de haberte ayudado.
    – JoseMgz_Ux
    Commented el 14 nov. 2022 a las 14:26
  • También puedes dar a respuesta útil, la flechita hacia arriba. :D
    – JoseMgz_Ux
    Commented el 14 nov. 2022 a las 14:30

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.