Image Pop Issue Id vs Class

[codeispoetry]

I created an image Popup system for my website. I have converted that into a code pen here →

Issue: it is pulling by ID, but one one page one ID can do this only for one image that comes first. what if there are more than one images, this code pen →

The second image is not clickable.

what is the permanent fix irrespective of number of images.

[PaulOB]

@codeispoetry

what is the permanent fix irrespective of number of images.

You need to use classes for the images instead of ids and then you can loop through them all. My JS is pretty basic but something like this forked demo of yours.

[codeispoetry]

@PaulOB

You need to use classes for the images instead of ids and then you can loop through them all. My JS is pretty basic but something like this forked demo of yours.

so sir, You have added this code, extra, right?

var img = document.querySelectorAll(".lazyimg-popup");
if (img) {
  for (var i = 0, len = img.length; i < len; i++) {
    img[i].onclick = function() {
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    };
  }
}

[PaulOB]

@codeispoetry

so sir, You have added this code, extra, right?

Yes, then I changed the css and the html to classes that previously referred to that id (lazyimg-popup).

Just compare the codepen if you find yours isn’t working.