<!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>라이트 박스 효과 만들기 </title>
<style>
.row {
width:420px;
margin:0 auto;
}
.row ul {
list-style:none;
margin:0;
padding:0;
}
.row ul li{
display:inline-table;
}
#lightbox {
position:fixed;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
top:0; /*시작 위치 -위쪽 끝*/
left:0; /*시작 위치- 왼쪽 끝*/
display:none; /*화면에서 감추기*/
}
#lightbox img {
position:absolute; /*top, left에 의해 위치지정*/
top:50%; /*위쪽에서 50% 부터 */
left:50%; /*왼쪽에서 50% 부터 */
transform:translate(-50%, -50%); /*요소를 화면 중앙에 표시하기 위해 이동*/
border:5px solid #eee;
}
button {
float:right;
}
</style>
</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"); //pic인 요소를 전부 가져옴
var lightbox = document.getElementById("lightbox"); //라이트 박스 요소를 전부 가져옴
var lightboxImage = document.getElementById("lightboxImage"); //라이트 박스 이미지 요소를 가져옴
//섬네일 이미지를 클릭하면 실행할 함수
for(i =0; i < pics.length; i++) {
pics[i].addEventListener("click",showLightbox);
//pics 배열의 i번째 요소를 클릭할 경우 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>
'JavaScript' 카테고리의 다른 글
| 17장 실습 2 (0) | 2023.04.14 |
|---|---|
| 17장 예제 -DOM에서 노드 추가하기 (0) | 2023.04.14 |
| 17장 예제 - DOM에서 이벤트 처리하기 (2) (0) | 2023.04.14 |
| 17장 예제 - DOM에서 이벤트 처리하기 (1) (0) | 2023.04.14 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3) (0) | 2023.04.13 |
