<img src="./img/image_1.jpg" alt="이미지" data-src=""/>
data로 자바스크립트에 정보를 넘겨줄 수 있다.
data- 이 뒤에 넘겨주고 싶은 속성명을 적어주면 된다. 뒤에 src부분은 내가 지어주는 건데 최대한 간단하게 지어주는 게 좋다.
html
더보기
<body>
<div class="row">
<ul>
<li>
<img
src="./img/image_1.jpg"
alt="이미지"
data-src="./img/image_1.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_2.jpg"
alt="이미지"
data-src="./img/image_2.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_3.jpg"
alt="이미지"
data-src="./img/image_3.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_4.jpg"
alt="이미지"
data-src="./img/image_4.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_5.jpg"
alt="이미지"
data-src="./img/image_5.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_6.jpg"
alt="이미지"
data-src="./img/image_6.jpg"
class="pic"
/>
</li>
</ul>
</div>
<div id="lightbox">
<img src="./img/image_1.jpg" alt="이미지" width="500" id="lightbox_img" />
</div>
<!-- 자바스크립트 연결 -->
<script src="./js/light_box.js"></script>
</body>css
더보기
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
img {
border: none;
display: block;
}
ul,
li {
list-style: none;
}
.row {
width: 640px;
height: fit-content;
margin: 100px auto;
}
.row ul {
width: 100%;
height: 100%;
display: flex;
gap: 20px;
flex-flow: row wrap;
}
.row li {
width: fit-content;
height: fit-content;
transition: 0.3s;
}
.row li:hover {
filter: brightness(0.8);
}
.row img {
width: 200px;
}
#lightbox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
}자바스크립트
더보기
"use strict";
//li안에 있는 작은 썸네일 이미지들 변수에 담아두기
const pics = document.querySelectorAll(".pic");
//라이트박스(부모박스) 변수에 담아두기
const lightbox = document.querySelector("#lightbox");
//라이트박스 안에 있는 큰 이미지 변수에 담아두기
const lightboxImage = document.querySelector("#lightbox_img");
//태그를 잘 데리고 오고 있나 확인
console.log(pics);
//썸네일 이미지를 클릭하면 실행할 이벤트 핸들러
//반복문으로 HTMLCollaction안에 있는 img태그들에 돌아가면서 이벤트를 추가
for (let i = 0; i < pics.length; i++) {
pics[i].addEventListener("click", showLightBox);
}
//이벤트가 발생하면 실행될 이벤트 핸들러
function showLightBox() {
//태그에 있는 data-를 넘겨 받아오기
let bigIamgeLocation = this.getAttribute("data-src");
//라이트박스 안에 있는 큰 이미지의 경로를 클릭한 해당 이미지로 바꾸기
lightboxImage.setAttribute("src", bigIamgeLocation);
//라이트박스를 다시 나타내기 justify-content: center align-items: center 해놨어서 그게 취소되면 안되니깐 다시 flex로 나타나게 해준다.
lightbox.style.display = "flex";
}
//라이트박스를 클릭하면 라이트박스를 숨겨서 썸네일 다시 보여주기
lightbox.onclick = function () {
lightbox.style.display = "none";
};"use strict"; 첫 줄 - ES6의 엄격한 문법을 사용하겠다라는 뜻
'예제 실습' 카테고리의 다른 글
| 실습) Plum 페이지 (0) | 2024.07.04 |
|---|---|
| 실습) lnb 아코디언 메뉴바 / 2차, 1차 메뉴 css 정리 (0) | 2024.07.02 |
| 실습) iLovePDF 사이트 클론코딩-2 같이 해본 버전 (0) | 2024.06.28 |
| 실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전 (0) | 2024.06.27 |
| 실습) split shire 사이트 클론 코딩 (0) | 2024.06.25 |
