Image gallery overlay

Namiya·2025년 7월 15일
JavaScript 연습

목록 보기
26/27
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <title>Image gallery with Overlay</title>
    <style>

        #gallery {
            display: flex;
            gap: 10px;
        }

        #gallery > li > a { display: block; }

        #gallery > li > a > img {
            display: block;
            width: 200px;

            border: 4px solid white;
            box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
        }

        /* 오버레이 레이어(overlay layer) */
        #overlay {
            /* 뷰포트(viewport)를 기준으로 전체를 차지하도록 배치 */
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;

            /* rgba 색상 단위로 배경색에 투명도를 설정 */
            background-color: rgba(0, 0, 0, 0.8);

            /* 처음에는 보이지 않도록 설정 */
            display: none;
        }

        #overlay > img {
            /* #overlay 요소의 영역을 기준으로 가운데에 배치 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            border: 10px solid white;

            /* 이미지의 최대 크기를 지정 */
            max-width: 80%;
            max-height: 80%;
        }

    </style>
    <script>

        window.addEventListener('load', function () {
            /*
            1. #gallery 요소의 <a> 요소를 클릭하면
            1.1. <a> 요소의 href 속성 값을 #photo 요소의 src 속성 값으로 설정
            1.2. #overlay 요소를 화면에 나타나게 한다
            2. #overlay 요소를 클릭하면
            2.1. #overlay 요소를 화면에서 사라지게 한다
            3. #photo 요소를 클릭하면
            3.1. #overlay 요소가 화면에서 사라지지 않도록 이벤트 전달을 제거한다
            */

            // 프로그램에서 참조하는 요소들을 미리 탐색
            const galleryItems = document.querySelectorAll('#gallery > li > a');
            const overlay = document.getElementById('overlay');
            const photo = overlay.firstElementChild;

            // 1. #gallery 요소의 <a> 요소를 클릭하면
            for (let i = 0; i < galleryItems.length; i++) {
                galleryItems[i].addEventListener('click', function(event) {
                    // <a> 요소의 기본 이벤트 제거
                    event.preventDefault();

                    // 1.1. <a> 요소의 href 속성 값을 #photo 요소의 src 속성 값으로 설정
                    photo.src = this.href;

                    // 1.2. #overlay 요소를 화면에 나타나게 한다
                    overlay.style.display = 'block';
                });
            }

            // 2. #overlay 요소를 클릭하면
            overlay.addEventListener('click', function() {
                // 2.1. #overlay 요소를 화면에서 사라지게 한다
                this.removeAttribute('style');
            });

            /*
            #photo 요소에서 발생한 click 이벤트를 부모 요소에세 전달하지 않도록 하기 위해
            1. #photo 요소에 click 이벤트 핸들러를 연결하고
            2. 이벤트 핸들러의 매개 변수를 지정해서 이벤트 객체를 전달받는다
            3. click 이벤트 핸들러에서 이벤트 객체의 stopPropagation 메서드를 호출하면
                이벤트 전달을 제거할 수 있다
            이렇게 하면, #photo 요소에 발생한 click 이벤트가 부모 요소에게 전달되지 않는다
            */

            // 3. #photo 요소를 클릭하면
            photo.addEventListener('click', function(event) {
                // 3.1. #overlay 요소가 화면에서 사라지지 않도록 이벤트 전달을 제거한다
                event.stopPropagation();
            });
        }); // window.onload

    </script>
</head>
<body>

    <!-- 오버레이 레이어(Overlay layer) -->
    <div id="overlay">
        <img src="https://i.imgur.com/7Mu8BZg.png" alt="Photo" id="photo">
    </div>

    <!-- 이미지 갤러리(image gallery) -->
    <ul id="gallery">
        <li>
            <a href="https://i.imgur.com/7Mu8BZg.png">
                <img src="https://i.imgur.com/RDQGlFG.png" alt="Thumbnail">
            </a>
        </li>
        <li>
            <a href="https://i.imgur.com/kwD72gU.png">
                <img src="https://i.imgur.com/VaVlu0Y.png" alt="Thumbnail">
            </a>
        </li>
        <li>
            <a href="https://i.imgur.com/qOU9yuQ.png">
                <img src="https://i.imgur.com/AJkIaya.png" alt="Thumbnail">
            </a>
        </li>
        <li>
            <a href="https://i.imgur.com/YfsvbdE.png">
                <img src="https://i.imgur.com/Y51UhBK.png" alt="Thumbnail">
            </a>
        </li>
        <li>
            <a href="https://i.imgur.com/3KWpPQv.png">
                <img src="https://i.imgur.com/gbPCnTb.png" alt="Thumbnail">
            </a>
        </li>
    </ul> <!-- /#gallery -->

</body>
</html>
Namiya
이전 포스트
Sub menu

다음 포스트
Image gallery overlay

JavaScript 연습

Sub menu

Mouse enter/leave

0개의 댓글
