갤러리에서 이미지를 클릭하면 배경이 어두워지고 중앙에 모달 창이 나타나며,

모달 내에서 이전 및 다음 이미지를 슬라이드 형식으로 보여주는 기능을 구현하려면,

적합한 라이브러리와 플러그인을 활용할 수 있습니다:

이러한 라이브러리들은 대부분 상세한 문서와 예제를 제공하므로,

프로젝트의 요구사항에 맞게 선택하여 적용하시면 원하는 기능을 구현하실 수 있을 것입니다.

 

예시로~

레이어 팝업이나 모달 창을 사용하여 갤러리 리스트에서 이미지를 클릭했을 때

내용을 표시하고, 화살표로 다음/이전 글을 이동할 수 있도록 만드는 구현하려면

아래와 같은 방식으로 작업할 수 있을 것입니다.

1. HTML 구조

갤러리와 모달 창의 기본 구조를 설정

<div class="gallery">

<div class="image" data-id="1">

<img src="image1.jpg" alt="Image 1">

</div>

<div class="image" data-id="2">

<img src="image2.jpg" alt="Image 2">

</div>

</div>

 

<div id="modal" class="modal hidden">

<div class="modal-content">

<span class="close">×</span>

<div class="content-area">

<p id="modal-text"></p>

</div>

<button class="prev">← Previous</button>

<button class="next">Next →</button>

</div>

</div>

2. CSS 스타일링

배경을 어둡게 하고 모달 창을 중앙에 표시

.hidden {

display: none;

}

 

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.8);

display: flex;

align-items: center;

justify-content: center;

}

 

.modal-content {

background: white;

padding: 20px;

border-radius: 10px;

width: 50%;

text-align: center;

}

 

.close {

position: absolute;

top: 10px;

right: 20px;

cursor: pointer;

}

 

button {

margin: 10px;

}

3. JavaScript 동작

모달 창을 열고 닫는 기능과 화살표를 통한 탐색 기능을 구현

document.addEventListener("DOMContentLoaded", () => {

const modal = document.getElementById("modal");

const modalText = document.getElementById("modal-text");

const images = document.querySelectorAll(".gallery .image");

let currentIndex = -1;

 

const openModal = (index) => {

currentIndex = index;

modalText.textContent = `Content for Image ${index + 1}`;

modal.classList.remove("hidden");

};

 

const closeModal = () => {

modal.classList.add("hidden");

};

 

const showNext = () => {

if (currentIndex < images.length - 1) {

openModal(currentIndex + 1);

}

};

 

const showPrevious = () => {

if (currentIndex > 0) {

openModal(currentIndex - 1);

}

};

 

images.forEach((image, index) => {

image.addEventListener("click", () => openModal(index));

});

 

document.querySelector(".close").addEventListener("click", closeModal);

document.querySelector(".next").addEventListener("click", showNext);

document.querySelector(".prev").addEventListener("click", showPrevious);

});

4. 기능 테스트

＊갤러리의 이미지를 클릭하면 모달 창이 열립니다.

＊ ← Previous와 Next → 버튼을 눌러 다른 이미지를 탐색할 수 있습니다.

＊모달 창 오른쪽 상단의 × 버튼을 눌러 창을 닫을 수 있습니다.