Implementing a Lightbox for ACF Images in Your WordPress Site

                        /* Style for the lightbox container */
#lightbox {
  /* Fix the lightbox position to the viewport */
  position: fixed;
  /* Ensure the lightbox is above other elements */
  z-index: 1000;
  /* Set the top offset to 100px from the top */
  top: 100px;
  /* Make the lightbox take the full width of the viewport */
  width: 100%;
  /* Make the lightbox take the full height of the viewport */
  height: 100%;
  /* Set the background color to a semi-transparent black */
  background-color: rgba(0, 0, 0, .8);
  /* Hide the lightbox by default */
  display: none;
}

/* Style for the lightbox when it is active (visible) */
#lightbox.active {
  /* Display the lightbox as a flex container */
  display: flex;
  /* Center content horizontally */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
}

/* Style for the image inside the lightbox */
#lightbox img {
  /* Set the image width to 60% of its container */
  width: 60%;
  /* Ensure the maximum width of the image is also 60% */
  max-width: 60%; 
}
                    

                        // Create a new div element for the lightbox
const lightbox = document.createElement('div')
// Set the id of the new div to 'lightbox'
lightbox.id = 'lightbox'
// Append the lightbox div to the body of the document
document.body.appendChild(lightbox)

// Select all image elements on the page
const images = document.querySelectorAll('img')

// Loop through each image and add a click event listener
images.forEach(image => {
  image.addEventListener('click', e => {
    // Add the 'active' class to the lightbox when an image is clicked
    lightbox.classList.add('active')
    
    // Create a new image element to display in the lightbox
    const img = document.createElement('img')
    // Set the source of the new image to be the same as the clicked image
    img.src = image.src
    
    // Remove any existing children (images) from the lightbox
    while (lightbox.firstChild) {
      lightbox.removeChild(lightbox.firstChild)
    }
    
    // Append the new image to the lightbox
    lightbox.appendChild(img)
  })
})

// Add a click event listener to the lightbox
lightbox.addEventListener('click', e => {
  // If the target of the click is not the lightbox itself, return early
  if (e.target !== e.currentTarget) return
  
  // Remove the 'active' class from the lightbox to hide it
  lightbox.classList.remove('active')
})