Skip to main content
explicacion de querySelectorAll y querySelector
Origen Enlace
JoseMgz_Ux
  • 724
  • 3
  • 18

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.

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.

Elimine las clases del li que agregue ya que no eran necesarias, todo los eventos se capturan a partir de la clase gallery del div
Origen Enlace
JoseMgz_Ux
  • 724
  • 3
  • 18

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.

<div class="gallery">
        <ul class="thumbItems">
            <li class="menu" 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 class="menu" 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>

El en HTML se agregó un div 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.

<div class="gallery">
        <ul class="thumbItems">
            <li class="menu" 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 class="menu" 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>

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.

<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>
Origen Enlace
JoseMgz_Ux
  • 724
  • 3
  • 18

El en HTML se agregó un div 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 class="menu" 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 class="menu" 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.

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%);
        }