How can this "click to enlarge image" function for multiple images?-CodePudding

I can't get this effect to work on multiple images. JavaScript is calling for the getElementById it seems to only work for a single image, I've tried to change it to getElementByClassName (and also the HTML and CSS) but then the function stops working, how can I get this effect on multiple images/ divs?

window.onload = function() {

  var modal = document.getElementById('myModal');

  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;
    captionText.innerHTML = this.alt;

  };

  var span = document.getElementsByClassName("modal")[0];

  span.onclick = function() {
    modal.style.display = "none";
  };


};

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#myImg:hover {
  cursor: pointer;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0.1)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 60px;
  font-weight: bold;
  ;
}

.close:hover {
  color: #FFD270;
  text-decoration: none;
  cursor: pointer;
}

#myImg {
  opacity: 1;
  display: inline-block;
  width: 100%;
  height: auto;
  transition: .45s ease;
  backface-visibility: hidden;
  margin: 20px;
}

<div  data-title="">
  <img id="myImg" src="..\01.jpg" alt="this works fine">
  <div id="myModal" >
    <span >X</span>
    <img id="img01"  src="..\01.jpg" alt="">
    <div id="caption"></div>
  </div>
</div>



<div  data-title="">
  <img id="myImg" src="..\02.jpg" alt="nothing happens">
  <div id="myModal" >
    <span >X</span>
    <img id="img01"  src="..\02.jpg" alt="">
    <div id="caption"></div>
  </div>
</div>

CodePudding user response：

The answer is delegation

Note

changed display: none to hidden on the tag and
changed most IDs to class or removed them since they are no longer needed due to relative addressing

It would even be possible to have just one modal

window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("container").addEventListener("click", e => {
    const tgt = e.target;
    if (!tgt.matches(".myImg") && !tgt.matches(".close")) return; // not the image or close
    const parent = tgt.closest("div.myndir-a4");
    const modal = parent.querySelector('.modal');
    if (tgt.matches(".close")) {
      modal.hidden = true;
      return;
    }
    const modalImg = parent.querySelector("img.modal-content");
    const captionText = parent.querySelector(".caption");
    modal.hidden = false;
    modalImg.src = tgt.src;
    captionText.innerHTML = tgt.alt;
  });
});

.modal {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.myImg:hover {
  cursor: pointer;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0.1)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 60px;
  font-weight: bold;
  ;
}

.close:hover {
  color: #FFD270;
  text-decoration: none;
  cursor: pointer;
}

.myImg {
  opacity: 1;
  display: inline-block;
  width: 100%;
  height: auto;
  transition: .45s ease;
  backface-visibility: hidden;
  margin: 20px;
}

<div id="container">
  <div  data-title="">
    <img  src="https://via.placeholder.com/728x90.png?text=image1" alt="this works fine">
    <div  hidden>
      <span >X</span>
      <img  src="" alt="">
      <div ></div>
    </div>
  </div>

  <div  data-title="">
    <img  src="https://via.placeholder.com/728x90.png?text=image2" alt="This ALSO works now">
    <div  hidden>
      <span >X</span>
      <img  src="" alt="">
      <div ></div>
    </div>
  </div>
</div>

I get