How to make a lightbox for dynamic images in JS

Question

I am trying to create images that can be clickable inside the grid. When the user clicks on the images, I want the image to pop out using a light box. However, this works with images that are hard coded inside the HTML but it doesn't work with images that are dynamically put on the website. The reason I have dynamic images is because the user can select pictures from a specific date and it displays them. But the light box doesn't work with those images. Anyone know on how I can do this or fix it? My displayGallery works fine, it displays the pictures and everything but the light box doesn't work with those pictures that my displayGallery displays.

This is my Display Gallery javascript, which dynamically displays my picture inside my gallery

function displayGallery(gallery)
{
 const gal = document.getElementById('gallery');

 /*remove previous images*/
 document.getElementById('gallery').innerHTML = "";

 for(let i = 0; i < gallery.length; i++)
 {
   const img = new Image();
   //alert(gallery[i]);
   img.src = gallery[i];
   gal.append(img);
 }
}

This is my lightbox JS

const lightbox = document.createElement('div')
lightbox.id = 'lightbox'
document.body.appendChild(lightbox)

const images = document.querySelectorAll('img')
images.forEach(image => {
  image.addEventListener('click', e => {
   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)
  lightbox.classList.remove('active')
})

MY CSS

#gallery {
  width: 80%;
  margin:auto;
  height: 1000px;
  display: flex;
  padding: 0 -8px;
  text-align: center;
  flex-wrap: wrap;
  overflow-y: auto;


}

#lightbox{
   position: fixed;
   z-index: 1000;
   top: 0;
   width: 100%;
   height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
   display: none;
 }

 #lightbox.active
 {
  display: flex;
  justify-content: center;
  align-items: center;
 }

#lightbox img
 {
   max-width: 90%;
   max-height: 80%;
   padding: 4px;
   background-color: black;
   border: 2px solid white;
}

.grid{
  display: grid;
  grid-template-columns: repeat(3,300px);
  justify-content: center;
  padding: 15px;
  grid-gap: 10px;
  height:100vh;

 }
.grid img{
  width: 350px;
  height: 200px;
  cursor:pointer;
  padding: 4px;
}

My scripts in my HTML

<!-- Scripts -->
    <script src="Sunset-GetLatestPicture.js"></script>
    <script src="Sunset-SearchSunset.js"></script>
    <script src="Sunset-Displaygallery.js"></script>
    <script src="Sunset-MinMaxCalender.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.dropotron.min.js"></script>
    <script src="assets/js/jquery.scrolly.min.js"></script>
    <script src="assets/js/jquery.scrollex.min.js"></script>
    <script src="assets/js/browser.min.js"></script>
    <script src="assets/js/breakpoints.min.js"></script>
    <script src="assets/js/util.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="Sunset-Lightbox.js"></script>

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>

    <script>

Are you you hooking the click event after dynamically adding an image? — Ouroborus
yeah, my lightbox script is after the script that creates my gallery — Bobby.lock
But are they being called in that order? You have the galley script wrapped in a function. Since the gallery script is inserting dynamic content, it would need to get the dynamic content from somewhere, for example, getting a list of urls from the server to build the gallery. The functions that fetch content from the server are asynchronous so they may not happen in the order written unless you take specific steps to ensure they do. — Ouroborus
Ahh i see what you mean. So i have my Sunset-GetLatestPicture.js which calls the gallery script when the HTML page loads it. Then Sunset-SearchSunset.js also calls it and changes the gallery based on the pictures I get from the user input. I can send you my website if you want if you want to loook at the souce code, its a simple website. — Bobby.lock

LTORO LTORO · Accepted Answer · 2022-07-28T16:25:50

You need to add this code after load images (under ajax success):

document.querySelectorAll('[data-toggle]').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show(); }));

How to make a lightbox for dynamic images in JS

1 Answers