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