[JS] 라이트 박스 효과 만들기

원하는 사진을 클릭하면 전면에 나타난 후 주변을 어둡게 처리하여 시선을 집중시키는 효과

1단계 : 프로그램의 흐름 정리하기

① 섬네일 이미지 6개를 화면에 보여줌.
② 섬네일 이미지 가운데 하나를 클릭하면 그 이미지를 라이트 박스 영역에 표시하고 화면에 나타나게 함.
③ 화면에 나타난 라이트 박스 영역을 클릭하면 다시 라이트 박스를 감춤.

<div class="row">
  <ul>
    <li><img src="../17/images/tree-1-thumb.jpg" data-src="../17/images/tree-1.jpg" class="pic"></li>
    <li><img src="../17/images/tree-2-thumb.jpg" data-src="../17/images/tree-2.jpg" class="pic"></li>
    <li><img src="../17/images/tree-3-thumb.jpg" data-src="../17/images/tree-3.jpg" class="pic"></li> 
    <li><img src="../17/images/tree-4-thumb.jpg" data-src="../17/images/tree-4.jpg" class="pic"></li>
    <li><img src="../17/images/tree-5-thumb.jpg" data-src="../17/images/tree-5.jpg" class="pic"></li>
    <li><img src="../17/images/tree-6-thumb.jpg" data-src="../17/images/tree-6.jpg" class="pic"></li>          
    </ul>    
</div>
<div id="lightbox">
  <img src="../17/images/tree-1.jpg" alt="" id="lightboxImage">			
</div>

2단계 : DOM 요소 가져오고 섬네일 이미지 보여 주기

<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);
      }
</script>

3단계 : 섬네일 이미지를 클릭하면 라이트 박스에서 보여 주기

function showLightbox() {
    var bigLocation = this.getAttribute("data-src");  // 섬네일 이미지의 속성값을 가져옴. 
    lightboxImage.setAttribute("src", bigLocation);   // 라이트 박스의 이미지 경로 수정
    lightbox.style.display = "block";  // 라이트 박스 이미지를 화면에 표시 
}

4단계 : 라이트 박스 감추기

lightbox.onclick = function() {
    lightbox.style.display = "none";  // 라이트 박스 요소를 화면에서 감춤. 
}