그럼에도 불구하고

👨‍💻

이미지 갤러리 (라이트 박스) 만들기 본문

JavaScript/Function implementation

이미지 갤러리 (라이트 박스) 만들기

zenghyun 2022. 12. 30. 23:24

이미지 갤러리를 만들어보자

 

조건

1. 사진 6개를 보여준다. 

2. 각각의 사진을 클릭하면 화면 전환이 되고 내가 누른 사진의 크기를 조절하여 보여준다.

3. 크기가 조절된 사진을 누르면 다시 사진 6개를 보여주게 만든다.

 

 

방법 1

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>라이트박스1</title>
  <link rel="stylesheet" href="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>
    console.time('test');

    let clickImgs = document.querySelectorAll('.pic');
    let lightbox = document.querySelector('#lightbox');
    let lightboxImage = document.querySelector('#lightboxImage');
    let myAry = Array.from(clickImgs);

    const result = myAry.map(function (item) {
      item.addEventListener('click', () => {
        let imgData = item.getAttribute("data-src");
        lightboxImage.setAttribute("src", imgData);
        lightbox.style.display = "block";
      })
    });


    lightboxImage.addEventListener('click', () => {
      lightbox.style.display = "none";
    });

    console.timeEnd('test');
  </script>
</body>

</html>

 

 

방법 2

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>라이트박스2</title>
  <link rel="stylesheet" href="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>
    console.time('test');

    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";
    }

    console.timeEnd('test');
  </script>
</body>

</html>

 

방법 3

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>라이트박스3</title>
  <link rel="stylesheet" href="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>
    console.time('test');
    let clickImgs = document.querySelectorAll('.pic');
    let lightbox = document.querySelector('#lightbox');
    let lightboxImage = document.querySelector('#lightboxImage');

    clickImgs.forEach(img => {
      img.addEventListener('click', () => {
        let imgData = img.getAttribute("data-src");
        lightboxImage.setAttribute("src", imgData);
        lightbox.style.display = "block";
      })
    })

    lightboxImage.addEventListener('click', () => {
      lightbox.style.display = "none";
    });

    console.timeEnd('test');
  </script>
</body>
</html>

 

CSS

 .row {
      width: 420px;
      margin: 30px auto;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    ul li {
      display: inline-block;
    }

    #lightbox {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.694);
      top: 0%;
      left: 0%;
      position: fixed;
      display: none;
    }

    #lightboxImage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid #eee;
    }

 

 

결과

 

방법 1 결과

 

라이트박스

 

lightbox01.netlify.app

 

방법 2 결과

 

라이트박스2

 

lightbox02.netlify.app

 

방법 3 결과

 

라이트박스3

 

lightbox03.netlify.app

 

3개 다 다른 방식으로 js code를 만들어서 어떤 방법이 가장 좋은 방법인지는 잘 모르겠다. 

시간 측정도 해봤는데 1번 방법이 제일 짧기는 했다. 

 

 

이보다 더 좋은 방법이 있다면 나중에라도 다시 해봐야겠다. 

 

'JavaScript > Function implementation' 카테고리의 다른 글

encodeURIComponent로 네이버 검색하기  (0) 2023.01.03
시계 만들기  (0) 2023.01.03
숫자 반환하기  (0) 2022.12.29
정규 표현식으로 특정 문자 검색하기  (1) 2022.12.28
지역 검색 구현하기  (1) 2022.12.24
'JavaScript/Function implementation' Related Articles more
Comments