[javascript] PhotoSwipe를 이용한 이미지 슬라이드 및 페이드 효과 구현 방법

22 Nov 2023

javascript

PhotoSwipe는 웹 사이트나 앱에서 이미지를 갤러리 형태로 보여주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 이미지 슬라이드와 페이드 효과를 구현하는 방법을 알아보겠습니다.

1. PhotoSwipe 라이브러리 추가

먼저, PhotoSwipe 라이브러리를 추가해야 합니다. 아래의 스크립트 태그를 HTML 파일의 <head> 태그 안에 추가하세요.

<script src="photoswipe.min.js"></script>
<script src="photoswipe-ui-default.min.js"></script>
<link rel="stylesheet" href="photoswipe.css">
<link rel="stylesheet" href="default-skin/default-skin.css">

2. HTML 구조 준비

다음으로, 이미지 슬라이딩 및 페이드 효과를 적용할 HTML 구조를 준비해야 합니다. 예시로는 <div> 요소와 <img> 요소를 사용하여 이미지를 감싸고, 탐색을 위한 버튼을 추가합니다.

<div class="my-gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

<button id="prev-button">이전</button>
<button id="next-button">다음</button>

3. JavaScript 코드 작성

이제, JavaScript 코드를 작성하여 PhotoSwipe 라이브러리를 초기화하고 이미지 슬라이딩 및 페이드 효과를 구현합니다. 아래의 코드를 <script> 태그 내에 추가하세요.

var myGallery = new PhotoSwipe('.my-gallery');

document.getElementById('prev-button').addEventListener('click', function () {
    myGallery.prev();
});

document.getElementById('next-button').addEventListener('click', function () {
    myGallery.next();
});

4. 스타일 적용

마지막으로, 원하는 스타일을 CSS 파일에 추가하여 이미지 슬라이딩 및 페이드 효과를 꾸밀 수 있습니다.

.my-gallery {
    position: relative;
    width: 100%;
    height: 400px;
}

.my-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.my-gallery img.active {
    opacity: 1;
}

이제 PhotoSwipe를 이용한 이미지 슬라이드 및 페이드 효과가 구현되었습니다. 이전 버튼과 다음 버튼을 클릭하여 이미지를 전환할 수 있습니다.

더 자세한 내용은 PhotoSwipe 공식 문서를 참고하세요.

이전 버튼 클릭 시 Prev 버튼 이벤트 핸들러를 참고하실 수 있습니다. 다음 버튼 클릭 시 Next 버튼 이벤트 핸들러를 참고하실 수 있습니다.