250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- ipad
- php
- hover
- css3
- xcode
- 자바스크립트
- iPhone
- SWIFT
- IOS
- html5
- image
- javascript
- 개발자
- front-end
- MAC
- 비전공 개발자
- 백엔드
- 비전공자
- react
- button
- iOS 개발자
- effect
- Animation
- CSS
- keyframes
- HTML
- 프론트엔드
- 풀스택
- jQuery
- 애니메이션
Archives
- Today
- Total
비전공자 개발일기
Javascript - lightBox 본문
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
'Javascript' 카테고리의 다른 글
Javascript - search (0) | 2021.11.03 |
---|---|
Javascript - list (0) | 2021.11.02 |
Javascript - Calendar2 (0) | 2021.10.31 |
Javascript - Theme Clock (0) | 2021.10.30 |
Javascript - Sticky Navbar (0) | 2021.10.29 |