title: Modal image galleries - multiple images
body: <p>I am currently trying to make an image gallery based on the code here: <a href="http://www.w3schools.com/howto/howto_css_modal_images.asp" rel="noreferrer">http://www.w3schools.com/howto/howto_css_modal_images.asp</a></p>
  
  <p>This code works fine for a single image, however it doesn't work when you try and add more. I believe this has to do with the javascript using IDs, but when I try to use classes in place of IDs that code will not work.</p>
  
  <p>Has anybody had any luck using this example from W3 Schools to create a working gallery?</p>
  
  <p>Thanks! :)</p>
  
  <p>Here's the HTML and javascript from the body of my code.</p>
  
  <pre><code>    &lt;div class="container" id="gallery"&gt;
  
          &lt;h1&gt;Gallery&lt;/h1&gt;
  
          &lt;!-- Trigger the Modal --&gt;
          &lt;img id="thumbnail-01" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200"&gt;
  
          &lt;!-- The Modal --&gt;
          &lt;div id="myModal" class="modal"&gt;
  
            &lt;!-- The Close Button --&gt;
            &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
  
            &lt;!-- Modal Content (The Image) --&gt;
            &lt;img class="modal-content" id="modal-image"&gt;
  
            &lt;!-- Modal Caption (Image Text) --&gt;
            &lt;div id="caption"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Trigger the Modal --&gt;
          &lt;img id="thumbnail-02" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200"&gt;
  
          &lt;!-- The Modal --&gt;
          &lt;div id="myModal" class="modal"&gt;
  
            &lt;!-- The Close Button --&gt;
            &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
  
            &lt;!-- Modal Content (The Image) --&gt;
            &lt;img class="modal-content" id="modal-image"&gt;
  
            &lt;!-- Modal Caption (Image Text) --&gt;
            &lt;div id="caption"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
   &lt;script&gt;
      // 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.getElementsByClassName('myImg');
      var modalImg = document.getElementById("modal-image");
      var captionText = document.getElementById("caption");
      img.onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
          captionText.innerHTML = this.alt;
      }
  
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName("close")[0];
  
      // When the user clicks on &lt;span&gt; (x), close the modal
      span.onclick = function() { 
        modal.style.display = "none";
      }
  &lt;/script&gt;
  </code></pre>