<문제 링크>

• 이미지 갤러리

[ 문제 ]

메인에 보여지는 이미지와 그 아래에 이미지 리스트들이 있습니다.

이미지 리스트의 이미지를 누르면 메인 이미지가 해당 이미지로 변경되고, 메인 상단에 위치하는 밝기 버튼을 눌렀을 때 밝기를 조절합니다.

저는 사진이 마음에 들지 않아 핑구 사진으로 했습니다.

[ 해결 방법 ]

HTML과 CSS는 GitHub에 올라와있습니다.

• 이미지 갤러리 깃허브

프로젝트 폴더에 본인이 사용할 이미지를 넣어줍니다.

그 후, 배열에 이미지 경로를 담아 넣고,

이 이미지를 루프를 돌려

images.map(image => {
	const newImage = document.createElement('img');
    newImage.setAttribute('src', image);
    newImage.setAttribute('alt', 'none');
    thumbBar.appendChild(newImage);

    newImage.addEventListener('click', changeImage(image))
})

만들어진 이미지마다 해당 이미지 소스를 입력하고, alt값을 생성합니다. 저는 그냥 none으로 통일했습니다.

그 후, thumbBar라는 div에 이미지를 추가하고

그 이미지의 이벤트를 넣어줍니다.

이때, 이벤트는

function changeImage(image) {
    return function() {
        displayedImage.setAttribute('src', image);
    }
}

이미지를 클릭하면 메인이미지의 소스값이 바뀌도록 작성하였습니다.

그 후,

밝기 조절 버튼입니다.

현재 상태을 알리는 변수를 하나 선언하고
그 상태에 따라 값을 바꿔줍니다.

let ld = false;

btn.addEventListener('click', function() {
    if(ld===true) {
        ld = !ld;
        btn.innerText="darken"
      displayedImage.style.filter="brightness(100%)"
    }
    else {
        ld = !ld;
        btn.innerText="Lighten"

    displayedImage.style.filter="brightness(50%)"
    }
})

[ 전체 js 코드 ]

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Declaring the array of image filenames */
let images = [
    '/images/pinggu.jpg',
    '/images/pinggu1.jpg',
    '/images/pinggu3.jpg',
    '/images/pinggu4.jpg',
    '/images/pinggu5.jpg'];

console.log(images);

let ld = false;
/* Declaring the alternative text for each image file */

/* Looping through images */

images.map(image => {
    const newImage = document.createElement('img');
    newImage.setAttribute('src', image);
    newImage.setAttribute('alt', 'none');
    thumbBar.appendChild(newImage);

    newImage.addEventListener('click', changeImage(image))
})


/* Wiring up the Darken/Lighten button */

btn.addEventListener('click', function () {
    if (ld === true) {
        ld = !ld;
        btn.innerText = "darken"
        displayedImage.style.filter = "brightness(100%)"
    }
    else {
        ld = !ld;
        btn.innerText = "Lighten"

        displayedImage.style.filter = "brightness(50%)"
    }
})


function changeImage(image) {
    return function () {
        displayedImage.setAttribute('src', image);
    }
}