[따라만들기] lightbox

https://youtu.be/xKr8OVOqs00

 

 

 

HTML에서 "data-*" 어트리뷰트로 표기하여 데이터셋 속성을 정의합니다.

 

자바스크립트는 DOM 생성 시점에 "data-" 로 시작하는 속성들을 하나로 모아 "dataset" 맵(Map)으로 따로 모아서 관리합니다.

자바스크립트에서 getAttribute("data-")를 통해서 HTML 어트리뷰트에 접근합니다.

<li><a href="#" alt="Gallery image"><img src="images/image-thumb-1.jpeg" data-lightbox="images/image-1.jpeg" alt="Gallery image"></a></li>

 

데이터셋 속성 추가

 

HTML 어트립뷰트 추가 메서드를 사용해 엘리먼트노드.setAttribute("속성명", "속성값");

방식으로 노드에 데이터셋 속성을 추가합니다.

 

또는, DOM 프로퍼티 접근 방식으로 엘리먼트노드.dataset.새데이터셋속성이름 = "속성값";

방법으로도 데이터셋 속성을 추가할 수 있습니다.

 

 

const img = document.querySelectorAll(".gallery img");
const lightbox = document.querySelector("#lightbox-overlay");
const lightboxImg = lightbox.querySelector("img");

console.log(img)

//1. 그림 클릭 시 클릭 이벤트 등록
for (let i = 0; i < img.length; i++) {
    img[i].addEventListener("click", (event) => {
        //2. 사용자가 이미지를 클릭했을때 data-lightbox의 value를 알아와야한다.
        //3. 알아온 값을 lightbox-overlay에 넣어준다.
        //셋다 같은 것임
        //let imgNewSrc = img[i]. 
        //let imgNewSrc = this. 
        //let imgNewSrc = event.target.
        let imgNewSrc = event.target.getAttribute("data-lightbox");
        console.log(imgNewSrc)

        //4. 클릭을 하면 lightboxImg에 src의 값을 큰 이미지의 경로로 지정
        //lightbox-overlay의 img의 src속성에 이미지경로(imgNewSrc) 지정해서 보여줌
        lightboxImg.setAttribute("src", imgNewSrc);
        //5. lightbox가 보이도록 한다.
        lightbox.classList.add("visible");
    });
}

//6. lightbox를 클릭하면 다시 사라지도록
lightbox.addEventListener("click", (event) => {
    lightbox.classList.remove("visible");
});