화면에 보이는 책을 클릭하면 큰 이미지의 라이트박스가 나타나고, esc key를 누르거나 닫기버튼, 그림자를 클릭하면 라이트박스가 닫히는 기능을 구현해보자.
HTML
<body>
<div id="wrap">
<h1>라이트박스</h1>
<p>
<a href="#" class="book">
<img src="./images/thumb_1.png" alt="반응형웹퍼블리싱">
</a>
<a href="#" class="book">
<img src="./images/thumb_2.png" alt="UX/UI디자인">
</a>
</p>
<!-- shadow 안에 lightbox를 넣어서 사진을 클릭해도 닫히도록 /
js에서 이벤트 버블링을 막으면 사진을 클릭해도 닫히지 않는다. -->
<div class="shadow">
<div class="lightbox">
<img src="#" alt="#">
<button class="clse">닫기</button>
</div>
</div>
</div>
</body>CSS
<style>
h1{
height: 100px;
line-height: 100px;
text-align: center;
}
.book{
display: inline-block;
width: 140px;
height: 190px;
}
img{
display: block;
width: 100%;
height: 100%;
}
.shadow{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
/* opacity: 0.75; */
}
.lightbox{
/* js에서 코딩으로 나타나게 할 것 */
position: fixed;
left: 50%;
top: 50%;
margin: -250px 0 0 -200px;
width: 400px;
height: 500px;
outline: 1px solid red;
}
.clse{
position: absolute;
right: 0;
bottom: -30px;
}
</style>jQuery 로직구현 과정
- 라이트박스 로직 1 ( lightbox가 빈 태그일 때 : img태그 추가하기 )
- 현재 클릭한 a태그의 href 속성값을 변수로 선언하고, 빈 태그(.lightbox)에 img 태그를 추가하여 변수선언한 href값을 img태그의 src속성값으로 넣는다.
- 현재 클릭한 a태그의 직계자식 img태그의 alt 속성값을 변수로 선언하고, 이 변수를 .lightbox>img 의 alt 속성값으로 넣는다.
- display:none 처리했던 lightbox를 보이도록 처리한다.
<script>
$(function(){
const $lightbox = $('.lightbox');
const $book = $('.book');
$book.on('click',function(evt){
evt.preventDefault();
const imgSrc = $(this).attr('href'); //href 변수선언
const imgAlt = $(this).children('img').attr('alt'); //alt 변수선언
$lightbox.append('<img>'); //img태그 추가
$lightbox.children('img').attr({ //img의 속성값에 부여
src : imgSrc,
alt : imgAlt
});
$lightbox.show();
});
});
</script>- 라이트박스 로직 2 ( img태그가 있을 때, 배열형식으로 속성값 부여 )
- src와 alt의 ("") 안에 들어갈 값을 배열형식으로 작성한 변수를 선언한다.
- 현재 클릭한 book의 인덱스를 선언한다.
- img태그의 속성 src, alt 값에 각각 위에서 배열변수로 선언한 값을 넣어준다. 이 때 index값을 추출하여 현재 순번의 값이 들어가도록 한다.
- display:none 해놨던 lightbox가 book을 클릭했을 때만 보이도록 show 메서드를 사용해준다.
<script>
$(function(){
const arrSrc = ['./images/big_1.png','./images/big_2.png'];
const arrAlt = ['반응형웹퍼블리싱','UX/UI디자인'];
const $lightbox = $('.lightbox');
const $book = $('.book');
$book.on('click',function(evt){
evt.preventDefault();
let nowIdx = $book.index(this);
$lightbox.children('img').attr({
src:arrSrc[nowIdx],
alt:arrAlt[nowIdx]
});
$lightbox.show();
});
});
</script>- 라이트박스 로직 3 ( 주변을 그림자로 처리하기 )
- html에
<div class="shadow"></div>태그를 추가한다. - css로 불투명한 검정 배경을 width, height 100%로 설정한다.
- shadow 변수를 선언하고 .show 메서드를 적용해준다.
- 나머지는 2번과 같음
<script>
$(function(){
const arrSrc = ['./images/big_1.png','./images/big_2.png'];
const arrAlt = ['반응형웹퍼블리싱','UX/UI디자인'];
const $lightbox = $('.lightbox');
const $book = $('.book');
const $shadow = $('.shadow');
$book.on('click',function(evt){
evt.preventDefault();
let nowIdx = $book.index(this);
$lightbox.children('img').attr({
src:arrSrc[nowIdx],
alt:arrAlt[nowIdx]
});
$shadow.show();
$lightbox.show();
});
});
</script>- 라이트박스 로직 4 ( 버튼과 그림자 클릭시 닫기기능, 이벤트버블링, esc key설정 )
- 클릭 이벤트는 3번과 동일하다.
- '닫기'버튼을 클릭하면 lightbox와 shadow를 숨기는 클릭 이벤트를 구현한다.
- 그림자를 선택해도 닫히도록 shadow에 클릭 이벤트를 구현한다.
- 사진 클릭 시 닫히지 않도록 lightbox의 이벤트 버블링을 막아주는 클릭 이벤트를 구현한다. (사진이 lightbox의 자식요소이기 때문에)
- esc의 키 번호를 출력하여 해당 번호의 키를 누를 시 닫히는 keyup 이벤트를 구현한다.
<script>
$(function(){
const arrSrc = ['./images/big_1.png','./images/big_2.png'];
const arrAlt = ['반응형웹퍼블리싱','UX/UI디자인'];
const $lightbox = $('.lightbox');
const $book = $('.book');
const $shadow = $('.shadow');
const $btnClse = $('.clse');
$book.on('click',function(evt){
evt.preventDefault();
let nowIdx = $book.index(this);
$lightbox.children('img').attr({
src:arrSrc[nowIdx],
alt:arrAlt[nowIdx]
});
$shadow.show();
$lightbox.show();
});
//닫기버튼
$btnClse.on('click',function(){
$lightbox.hide();
$shadow.hide();
});
//그림자를 선택해도 닫히도록
$shadow.on('click',function(){
$lightbox.hide();
$shadow.hide();
});
//이벤트 전파 막기 (사진 클릭하면 닫히지 않게)
$lightbox.on('click',function(evt){
evt.stopPropagation();
});
//esc 키를 이용한 닫기 설정 - keyup이벤트 : 키보드를 누르고 뗄떼 발생
$(document).on('keyup',function(evt){
console.log('현재 눌린 키의 번호는'+evt.which); //눌린키의 번호를 알수있음
if(evt.which=='27'){
$lightbox.hide();
$shadow.hide();
}else{
}
});
});
</script>
가치와 의미를 쫓는 개발자 되기✨