JS(Vanilla)
이벤트 다루기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<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: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #eee;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li><img src="tree-1-thumb.jpg" data-src = "tree-1.jpg" class = 'pic'></li>
<li><img src="tree-2-thumb.jpg" data-src = "tree-2.jpg" class = 'pic'></li>
<li><img src="tree-3-thumb.jpg" data-src = "tree-3.jpg" class = 'pic'></li>
<li><img src="tree-4-thumb.jpg" data-src = "tree-4.jpg" class = 'pic'></li>
<li><img src="tree-5-thumb.jpg" data-src = "tree-5.jpg" class = 'pic'></li>
<li><img src="tree-6-thumb.jpg" data-src = "tree-6.jpg" class = 'pic'></li>
</ul>
</div>
<div>
<input type="text" id="item">
<button type="button" id='show'>추가</button>
</div>
<div id="lightbox">
<img src = "tree-1.jpg" alt="" id="lightboxImage">
</div>
<script>
var pics=document.querySelectorAll(".pic");
var lightbox = document.querySelector("#lightbox");
var lightboxImage = document.querySelector("#lightboxImage")
function showLightbox() {
var bigLocation = this.getAttribute("data-src");
lightboxImage.setAttribute("src", bigLocation);
lightbox.style.display = "block";
}
for(var i=0; i<pics.length; i++){
pics[i].addEventListener("dblclick", showLightbox);
}
lightboxImage.addEventListener("click", function(){
lightbox.style.display = "none";
});
var show = document.querySelector('#show');
show.addEventListener("click", function(){
var item = document.querySelector("#item").value;
var bigLocation = pics[item].getAttribute("data-src");
lightboxImage.setAttribute("src", bigLocation);
lightbox.style.display = "block";
});
</script>
</body>
</html>
실행중인 setTimeout()을 강제로 종료한다.