향상된 이미지 갤러리 기능 구현

안녕하세요 :)

오늘은 저번에 이어서 이미지 갤러리 기능을 구현할 예정입니다.

저번에 진행되었던 기본적인 이미지 갤러리부터 확인하고 넘어오시는 걸 추천드립니다.

https://chpofo.tistory.com/61?category=891798 

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

지난번과 많이 달라진 점은 없고,

클릭을 했을 때 오버레이 되면서 이미지가 크게 나왔다가

다시 클릭을 하면 오버레이가 사라지는 기능을 구현해보도록 하겠습니다

 

---

html과 css는 빠르게 정리해보도록 하겠습니다.

<ul id="gallery">
  <li>
    <a href="img/img1.png">
    	<img src="img/img1_s.png" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="img/img2.png">
    	<img src="img/img2_s.png" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="img/img3.png">
    	<img src="img/img3_s.png" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="img/img4.png">
    	<img src="img/img4_s.png" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="img/img5.png">
    	<img src="img/img5_s.png" alt="Thumbnail">
    </a>
  </li>
</ul>

<div id="overlay">
	<img src="img/img1.png" alt="photo" id="photo">
</div>

이미지 같은 경우는 다음에도 사용할 수 있을 거 같아서 그냥 명언으로 간단하게 제작하여 사용하였습니다.

이미지는 1920 * 1080 사이즈와 200*113 사이즈로 제작하였습니다.

이미지가 필요하실지는 모르겠지만 필요하시다면 댓글에 남겨주시면 보내드리도록 하겠습니다.

 

▼ 소스코드 살펴보기

3 : 이미지를 클릭하여서 큰 이미지로 변경하기 위해서 <a> 태그의 href의 경우 큰 사이즈의 사진으로 연결

4 : 이미지의 사이즈는 작은 사진으로 나열

29 : 오버레이가 될 영역을 따로 만들어서 큰 이미지 삽입까지 

 

html 같은 경우에는 어려운 부분은 없지만 이미지의 사이즈를 두 가지로 제작해서 했다는 점만

고려해서 봐주시면 될거같습니다. 같은 사이즈로 해도 무방합니다.

 

<style>

  #gallery{margin: 100px;}

  #gallery::after{content: ""; display: block; clear: both;}

  #gallery > li{float: left; margin: 0 10px;}

  #gallery > li > a{display: block; text-decoration: none;}

  #gallery > li > a > img{
    display: block; 
    width: 200px; 
    border: 5px solid black; 
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
  }

  #overlay{
    position: fixed;
    top: 0; right: 0; left: 0; bottom: 0;

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

    display: none;
  }

  #photo{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);

    max-width: 80%;
    max-height: 80%;
    border: 10px solid white;
  }

</style>

 

▼ 소스코드 살펴보기

5 : #gallery > li를 float를 시켜서 부모의 영역을 잡아주기 위해서 추상 클래스를 사용해요 영역 잡기

7 : 이미지들을 가로로 배치하기 위해서 float : left 시키기

19-20 : 오버레이 같은 경우는 해당 갤러리 맨뒤에 어둡게 배경이 깔리면서 이미지가 나와야하니까 뷰 토트를 기준으로 전체를 가리도록 배치

24 : 처음에는 보이지 않도록 설정

28-30 : #overlay 요소의 영역을 기준으로 가운데에 배치

 

아직 저의 블로그에 float 속성에 대해 정리한 글이 존재하지 않지만 지금 float속성에 대해서 정리를 해서 다음 주에 업로드를 할 예정이오니, 이해가 안 된다면 다음에 올라오는 포스팅 글을 봐주시면 되겠습니다.

작성 완료되면 해당 게시물에도 추가를 해드리도록 하겠습니다.

 

float에 대한 자세한 내용은 float속성 게시물을 확인해주시면 되겠습니다.

CSS 부분은 이렇게 마무리를 하고 핵심인 JS를 작성해봅시다.

 

---

스크랩트 순서 정리

1. #gallery 요소의 a 요소를 클릭하면

1.1. #photo 요소의 사진을 클릭한 요소의 href 속성 값으로 바꾸고

1.2. #overlay 요소를 화면에 나타나게 한다.

2. #overlay 요소를 클릭하면

2.1. #overlay 요소를 화면에서 숨긴다

<script>
    var overlay = document.getElementById("overlay");
    var photo = document.getElementById("photo");
    var Thumbnails = document.querySelectorAll("#gallery > li > a");

    for(var i=0; i<Thumbnails.length; i++){
    	Thumbnails[i].addEventListener("click", function(e){
    	e.preventDefault();
    	photo.src = this.href;
    	overlay.style.display = "block";
    });

    overlay.addEventListener("click", function(){
		this.removeAttribute("style");
	});
    }
</script>

▼ 소스코드 살펴보기

2-4 : 프로그램에서 참조하는 요소를 미리 탐색

5 : #gallery 요소의 a 요소를 클릭하는 경우를 for문으로 반복

6 : 이벤트 핸들러 : a 요소에 click 이벤트가 발생하면 실행할 기능

7 : 기본 이벤트 제거

8 : #photo 요소의 사진을 클릭한 요소의 href 속성값으로 바꾸기

    (photo.setAttribute("src", this.getAttribute("href")); 와 같은 의미)

9 : #overlay 요소를 화면에 표현

12 : #overlay 요소에 click 이벤트가 발생하면 실행할 기능

13 : #overlay 요소를 화면에서 숨긴다

      (this.style.display = "none"; = this.style.display = ""; 와 같은 의미) 

 

드디어 완성된 이미지 갤러리

결과물 확인 해봅시다.

이미지 갤러리

 

여기서 추가로 #overlay를 클릭하는 게 아니고 X 버튼을 하나 만들어서 버튼을 클릭했을 때 꺼지게 되면

더 좋은 이미지 갤러리가 되지 않을까 싶네요 ^^

어렵지 않으니까 다들 도전해보고 댓글에 성공 후기 알려주세요~

버튼을 만들어서 닫고 싶은데 잘 안될 경우에도 댓글에 도움을 요청해주시면 알려드리도록 하겠습니다.

그럼 오늘 포스팅도 여기까지 하도록 하겠습니다 :D

 

 

 

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

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

 

 

 

 

 

 

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