Image Pop Issue Id vs Class

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.

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.

1 Like

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() { = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;

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.:slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.