title: How to add thumbnails to modal images
body: <p>Question: How can I make a modal image use a thumbnail? Not the original image as the thumbnail, because I have specific images to use as thumbnails.</p>
  
  <p>I am currently trying to make a small 5 picture gallery in a page for my website. So far I have a gallery that does the following:</p>
  
  <ul>
  <li>When thumbnail is pressed the full size image appears in a new window</li>
  </ul>
  
  <p>I would like my image to appear in front of the page, without leaving the gallery. </p>
  
  <p>I have researched and found out how to implement a modal image in my gallery. </p>
  
  <p>As you can see below in the last image I implemented a modal function. </p>
  
  <p>With this modal function I am able to take an image and make it the size of a thumbnail and once clicked it becomes larger and the screen becomes gray. In itself it is doing what I want it to do, except for the part where the I want a different image as a thumbnail and a different image as the full size image that appears.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="content"&gt;  
          &lt;div class="imageRow"&gt;
              
              &lt;div class="single"&gt;
                  &lt;a href="images/examples/image-prints-1.jpg" rel="lightbox" title=""&gt;
                   &lt;img src="images/examples/thumbs-prints-1.jpg" alt=""/&gt;&lt;/a&gt;&lt;br /&gt; 
              &lt;/div&gt;      
                    
              &lt;div class="single"&gt;
                  &lt;a href="images/examples/image-prints-2.jpg" rel="lightbox" title=""&gt;
                      &lt;img src="images/examples/thumbs-prints-2.jpg" alt="" /&gt;&lt;/a&gt;&lt;br /&gt; 
              &lt;/div&gt;
              
              &lt;div class="single"&gt;
                  &lt;a href="images/examples/image-prints-3.jpg" rel="lightbox" title=""&gt;
                      &lt;img src="images/examples/thumbs-prints-3.jpg" alt="" /&gt;&lt;/a&gt;&lt;br /&gt; 
              &lt;/div&gt;
  
              &lt;div class="single"&gt;
                  &lt;a href="images/examples/image-prints-4.jpg" rel="lightbox" title=""&gt;
                      &lt;img src="images/examples/thumbs-prints-4.jpg" alt="" /&gt;&lt;/a&gt;&lt;br /&gt; 
              &lt;/div&gt;
  
          &lt;!-- Trigger the Modal --&gt;
       
       &lt;img id="myImg" src="images/examples/thumbs-prints-5.jpg" alt="Trolltunga, Norway" width="79" height="79"/&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="img01"&gt;
  
   &lt;!-- Modal Caption (Image Text) --&gt;
       &lt;div id="caption"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the javascript.</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
      modalImg.alt = this.alt;
      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>Here is the css code</p>
  
  <pre class="lang-css prettyprint-override"><code>/* ------------- MODAL STARTS----------------*/
  /* Style the Image Used to Trigger the Modal */
  #myImg {
      border-radius: 0px; /* changed from 5px to 0px so the thumbnails are not rounded */
      cursor: pointer;
      transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.5;}
  
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)} 
      to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
      .modal-content {
          width: 100%;
      }
  }
  
  /* ------------- MODAL ENDS ------------------*/
  </code></pre>
  
  <p>I tried to be as extensive as possible as to not have anyone confused. </p>