Lightbox Shows Same Image For Any Image I Click On

Question

I have set up a JS lightbox with 6 different images. When I click on an image, the same image pops up in the lightbox, rather than the image I clicked on. The image that displays every time is the last image of those that have the tag '.service_img'. Is there some kind of JS I can add to make it show the image I click on, rather than the same one each time?

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')
})

Lightbox Shows Same Image For Any Image I Click On

0 Answers