DAY06.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>라이트박스</title>
    <link rel="stylesheet" href="css/lightbox.css">
  </head>
  <body>
    <div class="row">
      <ul>
        <li><img src="images/tree-1-thumb.jpg" data-src="images/tree-1.jpg" class="pic"></li>
        <li><img src="images/tree-2-thumb.jpg" data-src="images/tree-2.jpg" class="pic"></li>
        <li><img src="images/tree-3-thumb.jpg" data-src="images/tree-3.jpg" class="pic"></li> 
        <li><img src="images/tree-4-thumb.jpg" data-src="images/tree-4.jpg" class="pic"></li>
        <li><img src="images/tree-5-thumb.jpg" data-src="images/tree-5.jpg" class="pic"></li>
        <li><img src="images/tree-6-thumb.jpg" data-src="images/tree-6.jpg" class="pic"></li>          
      </ul>    
    </div>

    <div id="lightbox">
         <img src="images/tree-1.jpg" alt="" id="lightboxImage">         
    </div>

    <script>
      var pics = document.getElementsByClassName("pic"); 
      var lightbox = document.getElementById("lightbox");  
      var lightboxImage = document.getElementById("lightboxImage");  

      for (i=0; i<pics.length; i++) {
        pics[i].addEventListener("click", showLightbox);
      }

      function showLightbox() {
            var bigLocation = this.getAttribute("data-src"); 
            lightboxImage.setAttribute("src", bigLocation);  
            lightbox.style.display = "block"; 
      }
      
      lightbox.onclick = function() {  
            lightbox.style.display = "none";  
      }
    </script>
  </body>
</html>