본문 바로가기
Web/JavaScript

기본적인 이미지 갤러리 기능 구현

by chaen98 2021. 8. 9.
반응형

신나는 월요일을 js와 함께 시작해볼까 합니다.

이번 주는 이미지 갤러리 기능 구현을 해볼까 합니다.

단계는 2단계로 진행할 예정입니다.

어렵지 않으니까 천천히 같이 해봅시다

 

이미지 갤러리란?

많은 사이트에서 볼 수 있는 이미지 갤러리

이미지 리스트가 있고 메인 이미지가 있는데, 작은 이미지 썸네일을 클릭하면

메인 이미지가 변경되는 이미지 갤러리를 만들어볼까 합니다.

시작해볼까요?? 먼저 완성작부터 확인 후 시작해봅시다.

이미지 갤러리

 


항상 시작은 html 작성

<div id="container">
	<img src="puppy-1903313_960_720.jpg" alt="photo" id="photo">
</div>

<ul id="gallery">
	<li><img src="puppy-1903313_960_720.jpg" alt="thumbnail"></li>
	<li><img src="dog-4415649_960_720.jpg" alt="thumbnail"></li>
	<li><img src="pets-3715733_960_720.jpg" alt="thumbnail"></li>
</ul>

이미지 url이 길어져서 해당 소스에서는 수정해서 올려서 해당 소스 그래도 구현할 시 작동 안 됩니다.

이미지는 픽사 베이에서 이미지 주소 복사해서 사용했습니다.

html 소스는 어렵지 않게 누구나 작성할 수 있는 수준이죠??

 

갤러리처럼 CSS를 입혀주기만 하면 기본적인 틀은 완성

#container{margin-bottom: 80px;}
#photo{
  display: block;
  width: 960px;
  border: 10px solid black;
  margin: 0 auto;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
#gallery{text-align: center;}

#gallery > li {
  display: inline-block;
  margin: 0 10px;
}

#gallery > li > img{
  display: block;
  width: 200px;
  border: 5px solid black;
  cursor: pointer;
}

 CSS에는 정답은 없으니까 자신의 입맛에 맞게 수정하고 적용하면 됩니다.

여기서는 이미지 크기에만 신경 써서 작성하면 별 다른 큰 문제는 없을 듯합니다.

 

이미지 갤러리 레이아웃

CSS까지 입혀주니 기본적인 이미지 갤러리 레이아웃이 잡혔네요

이제는 아래의 작은 썸네일을 클릭하면 메인화면에서 해당 사진이 크게 보이게 하는 JS를 작성해봅시다.

 


항상 JS를 작성하기 전에 구현해야 하는 것을 정리를 하고 순서를 정해놓고 시작하는 게 도움이 됩니다.

 

1. #thumbnail의 img 요소를 클릭하면

2. #photo 요소에 표시되는 사진을 클릭한 요소의 사진으로 바꾼다

 

<script>

  var photo = document.getElementById("photo");
  var thumbnail = document.querySelectorAll("#gallery > li > img");

  for ( var i = 0; i < thumbnail.length; i++ )
    thumbnail[i].addEventListener("click", function () {

      photo.setAttribute("src", this.getAttribute("src"));

    });

</script>

▼ 소스코드 살펴보기

6 : ( 반복문 이용 ) thumbnails의 각 원소들, 즉 img 요소를 표현하는 Element 객체에 click 이벤트 핸들러 연결

7 : 이벤트 핸들러 : #gallery 요소의 img 요소에 click 이벤트가 발생하면 실행할 기능

9 : #photo 요소에 표시되는 사진을 클릭한 요소의 주소(src)를 바꾼다.

     Phoro.setAttribute("src", this.getAttribute("src")); 와 같은 의미로 photo.src = this.src; 로도 표현 가능

 

오늘도 쉬우면서도 많이 사용되는 기능을 같이 구현해봤습니다.

다음번에는 오버레이가 되면서 이미지가 크게 나오는 향상된 이미지 갤러리를 정리하도록 하겠습니다.

제가 정리하는데 속도가 느려서 일주일에 두 개씩 업로드를 하고 있는데

혹시 궁금한 점이나 구현 방법을 정리해줬으면 하는 기능들이 있으면 댓글이나 방명록에 적어주시면

제가 공부를 하고 정리를 해서 업로드를 해드리도록 하겠습니다.

그러면 다음번에 향상된 이미지 갤러리와 함께 오겠습니다.

 

 

 

 

 

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요 ^^

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)

 

반응형

댓글