He configurado una caja de luz JS con 6 imágenes diferentes. Cuando hago clic en una imagen, aparece la misma imagen en el cuadro de luz, en lugar de la imagen en la que hice clic. La imagen que se muestra cada vez es la última imagen de las que tienen la etiqueta '.service_img'. ¿Hay algún tipo de JS que pueda agregar para que muestre la imagen en la que hago clic, en lugar de la misma cada vez?
const lightbox = document.createElement('div') lightbox.id = 'lightbox' document.body.appendChild(lightbox) function openLightbox(){ const images = document.querySelectorAll('.service_img'); images.forEach(image => { lightbox.classList.add('active'); const img = document.createElement('img') img.src = image.src while (lightbox.firstChild){ lightbox.removeChild(lightbox.firstChild) } lightbox.appendChild(img) }) } lightbox.addEventListener('click', e => { if (e.target !== e.currentTarget) return lightbox.classList.remove('active') })