Data-index를 이용한 Gallery

Thumbnails 사진을 하나씩 클릭할 때마다 Gallery 사진 바뀌고,
Thumbnails 사진을 하나씩 클릭할 때마다 선택된 사진의 outline 옮겨감

---

HTML

<h1>Gallery</h1>
    <img class="pop" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGqcdOhN0mvnH5zDzO_i9K6aYzSf2mdG3XQTFb6gZO4OQ98CFksJx_qK1_td-v1MEi5RM&usqp=CAU" 
        alt="kuromi"
        id="top">

    <h2>Thumbnails</h2>
    <div class="main">
    	// 첫번 째 이미지에 기본적으로 outline 설정 되어있음
        <img class="thumbnail show" data-index="0" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGqcdOhN0mvnH5zDzO_i9K6aYzSf2mdG3XQTFb6gZO4OQ98CFksJx_qK1_td-v1MEi5RM&usqp=CAU" 
        alt="kuromi">
        <img class="thumbnail" data-index="1" src="https://i.pinimg.com/originals/1b/cc/e8/1bcce82b5c99525fdea63cff71efc1a2.jpg" alt="">
        <img class="thumbnail" data-index="2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYfXYgQF2Ie6p2HgDshGMyWp7VeZLMg-zDP9U3dLhaNA5yJMBHqGmMLNNP5ft081z2dVM&usqp=CAU" alt="">
    </div> 

CSS

<style>
        .pop {
            width: 300px;
            display: block;
            object-fit: cover;
        }
        .main {
            display: flex;
            width: 100px;
            height: 100px;
        }
        .show {
            outline: 4px skyblue solid;
            z-index: 1;
        }
    </style>

JS

<script>
    var pop = document.getElementById("top");
    var thumbnails = document.getElementsByClassName("thumbnail");
    // data-index 기본 값 = 0
    var dataIndex = 0;
    console.log(pop);
    console.log(thumbnails);


    // 썸네일 사진 한 장씩 클릭할 때마다 사진 바뀜
    for(var i=0; i<thumbnails.length; i++) {
    		// i값이 바뀔 때마다 썸네일에 클릭 이벤트
            thumbnails[i].addEventListener("click", (e) => {

                // 클릭한 썸네일의 데이터 인덱스에 접근
                console.log(e.target.getAttribute('data-index'));

                dataIndex = e.target.getAttribute('data-index');

                pop.src = e.target.src;   
               

               console.log(thumbnails[dataIndex])
                
               // 썸네일에 show가 있으면 제거 후
               for (var j=0; j<thumbnails.length; j++) {
                thumbnails[j].classList.remove("show")
               }

				// 제거 후 show
               thumbnails[dataIndex].classList.add('show');
            });
    }
    </script>

---

Data index

• 엘리먼트의 인덱스 번호 부여