Javascript

Javascript - lightBox

HiroDaegu 2021. 11. 1. 00:10

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LIGHTBOX</title>
    <link rel="stylesheet" href="style.css" />
    <script defer src = "main.js"></script>
  </head>
  <body>
    <header>
      <h1>Light BOX</h1>
      <img class="thumb" src="./images/1.jpg" alt="1" onclick="lightbox_open(1)">
      <img class="thumb" src="./images/2.jpg" alt="2" onclick="lightbox_open(2)">
      <img class="thumb" src="./images/3.jpg" alt="3" onclick="lightbox_open(3)">
    </header>

    <div id="block"></div>
    
    <div id="lightbox">
      <h1>일본 사진</h1>
      <p>일본의 경치를 느낄 수 있는 사진들...<br><br></p>
      <figure>
        <img src="./images/1.jpg" alt="1" class="active">
        <img src="./images/2.jpg" alt="2">
        <img src="./images/3.jpg" alt="3">
      </figure>
      <div class="indicator">
        <button onclick="change_img(this.innerHTML)">1</button>
        <button onclick="change_img(this.innerHTML)">2</button>
        <button onclick="change_img(this.innerHTML)">3</button>
      </div>
      <div class="btn-close" onclick="lightbox_close()">x</div>
    </div>
  </body>
</html>

* {
  margin: 0;
}

body {
  padding: 20px;
}

header img {
  width: 150px;
}

h1, p {
  font-weight: normal;
  margin: 5px 0;
}

/* 라이트 박스 컨테이너 */
#lightbox.active {
  position: absolute;
  overflow: hidden;
  background: #333;
  width: 800px;
  height: 540px;
  left: 50%;
  margin-left: -400px;
  top: 50%;
  margin-top: -250px;
  box-sizing: border-box;
  padding: 30px;
  z-index: 99;
  display: block;
}

#lightbox {
  display: none;
}

#lightbox h1, #lightbox p {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

/* 이미지 박스 */
figure {
  width: 500px;
  height: 300px;
  position: relative;
  margin: 10px auto;
  overflow: hidden;
}

figure img {
  display: none;
  position: absolute;
}

figure img.active {
  display: block;
}

/* 창 닫기 버튼 */
.btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: #fff;
  font-size: large;
}

.btn-close:hover {
  background-color: #666;
}

#block {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  opacity: .5;
  z-index: 9;
  display: none;
}

#block.active {
  display: block;
}

.indicator {
  text-align: center;
}

.indicator button {
  background: #666;
  color: #fff;
  font-size: 12px;
  border: none;
  padding: 2px 5px;
}

.indicator button:focus {
  background: #38f;
}

const indicator = document.querySelectorAll(".indicator button");
const lightbox = document.querySelector("#lightbox");
const block = document.querySelector("#block");

// 라이트 박스 표시
function lightbox_open(num) {
  lightbox.setAttribute("class", "active");
  block.setAttribute("class", "active");

  change_img(num);
  indicator[num-1].focus();
}

// 라이트 박스 종료
function lightbox_close() {
  lightbox.removeAttribute('class');
  block.removeAttribute('class');
}

// 이미지 전환 표시 함수
function change_img(val) {
  let imgs = document.querySelectorAll("figure > img");
  
  for(let i = 0; i <imgs.length ; i++) {
    imgs[i].removeAttribute("class");
  }
  // console.log(val);
  imgs[val-1].setAttribute("class", "active")
}

728x90

LIST