How to open a modal image for multiple images

Question

on w3schools site i found a tutorial for a dialog box/popup window. I would like to implement this with more images.

my code:

<img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">

<!-- Modal -->
<div id="myModal" class="modal">
   <!-- Close button -->
   <span class="close">&times;</span>
   <!-- Modal content -->
   <img class="modal-content" id="modal-image">
</div>

<script type="text/javascript">
   var modal = document.getElementById('myModal');
   var img = document.getElementById('myImg');
   var modalImg = document.getElementById('modal-image');

   function openModal() {
       modal.style.display = "block";
       modalImg.src = this.getAttribute("data-highres");
   }

   /*img.onclick = function() {
   modal.style.display = "block";
   modalImg.src = this.getAttribute("data-highres");
   }*/

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

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

   window.onclick = function() {
   if(event.target == modal) {
        modal.style.display = "none";
      }
   }
</script>

css:

  #myImg {
    cursor: zoom-in;
    transition: 0.3s;
  }

  #myImg:hover {
    opacity: 0.7;
  }

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

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

  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
  }

the code is working for one image. so i added a function openModal() and uncomment some part of the previous code. But now this isn't working even for one image it opens the modal without the image.

thank you for your help

Answer 1

The error in the console is Uncaught ReferenceError: openModal is not defined. This means the function was run at a scope in which it was not defined. an easy fix would be to define it in a global scope, like window:

window.openModal = function(img) {
  modal.style.display = "block";
  modalImg.src = img.getAttribute("data-highres");
}

and then

<img onclick="openModal(this);" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">

---

However, you should not use not use onclick anymore (w3schools is a bit old now) like this answer says.

What you want to do is attach an event listener to your images. Loop through all of your images and use the addEventListener('click' ...) to listen when they were clicked.

var images = document.querySelectorAll('img');
for(var i=0, len = images.length; i < len; i++){
    images[i].addEventListener('click', openModal);
}