title: Modal Images- using directory images - W3 Schools Modal Image mod
body: <p>I am working with the Modal Image tutorial on W3 Schools. In the tutorial it uses the image that was clicked on as the picture that is displayed. I would like the modal to display a file from my directory rather than the clicked image. I plan on having multiple instances of this modal on the same page that link to separate files in the directory.</p>
  
  <p>How do I get an element from my directory rather than the var "img01"/"myImg"</p>
  
  <p>HTML
      
      </p>
  
  <pre><code> &lt;!-- The Modal --&gt;
   &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- The Close Button --&gt;
    &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
  
    &lt;!-- Modal Content (The Image) --&gt;
    &lt;img class="modal-content" id="img01"&gt;
  
    &lt;!-- Modal Caption (Image Text) --&gt;
    &lt;div id="caption"&gt;&lt;/div&gt;
  
   &lt;/div&gt; 
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&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.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;
  }
  
  // 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";
  }
  </code></pre>
  
  <p></p>