scripts/lightbox.js

function setupLightbox(thumbnailId, lightboxId, lightboxImgId, closeBtnId) {
  const thumbnail = document.getElementById(thumbnailId)
  const lightbox = document.getElementById(lightboxId)
  const lightboxImg = document.getElementById(lightboxImgId)
  const closeBtn = document.getElementById(closeBtnId)

  if (thumbnail && lightbox && lightboxImg && closeBtn) {
    thumbnail.addEventListener('click', () => {
      lightbox.style.display = 'block'
      lightboxImg.src = thumbnail.src
    })

    closeBtn.addEventListener('click', () => {
      lightbox.style.display = 'none'
    })

    lightbox.addEventListener('click', (e) => {
      if (e.target === lightbox) {
        lightbox.style.display = 'none'
      }
    })
  } else {
    console.warn(`Элементы лайтбокса "${lightboxId}" не найдены.`)
  }
}

setupLightbox('openLightbox1', 'lightbox1', 'lightbox-img1', 'closeLightbox1')
setupLightbox('openLightbox2', 'lightbox2', 'lightbox-img2', 'closeLightbox2')
setupLightbox('openLightbox3', 'lightbox3', 'lightbox-img3', 'closeLightbox3')
setupLightbox('openLightbox4', 'lightbox4', 'lightbox-img4', 'closeLightbox4')