javascript - dynamically displaying images for Lightbox image ejs

Question

I'm trying to dynamically load images into my table, which I got to work, but I am trying to get it to work where if I click the image, a Lightbox pops up that makes it show the image big. I cannot get this to work.

ejs:

<td>
<input id="<%= data[i].IMAGE %>" type="button" src="<%= data[i].IMAGE %>" alt="ORIGINAL PRODUCT IMAGE" value="See Current Image" width="300" height="200">
</td>

js:

// Get the modal
                var modal = document.getElementById('myModal');
                
                // Get the image and insert it inside the modal - use its "alt" text as a caption
                var img = document.getElementById('myImg');
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                img.onclick = function(){
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    modalImg.alt = this.alt;
                    captionText.innerHTML = this.alt;
                }
                
                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0];
                
                // When the user clicks on <span> (x), close the modal
                span.onclick = function() { 
                    modal.style.display = "none";
                }

it only works for the very first image in my table, not sure how to fix. thanks

Answer 1

you are getting img by id, you should loop through all the imgs you have in the DOM and add event to each one of them.

can be dont that way: add class to the element with id = myImg, for this example it will be class="myImgLightBox"

// Get the modal
                var modal = document.getElementById('myModal');
                
                // Get the image and insert it inside the modal - use its "alt" text as a caption
                var imgs = document.getElementsByClassName('myImgLightBox');
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                for(let img of imgs){
                 img.onclick = function(){
                     modal.style.display = "block";
                     modalImg.src = this.src;
                     modalImg.alt = this.alt;
                     captionText.innerHTML = this.alt;
                 }
                }
                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0];
                
                // When the user clicks on <span> (x), close the modal
                span.onclick = function() { 
                    modal.style.display = "none";
                }