[javascript] PhotoSwipe를 이용한 이미지 마우스 오버 효과 구현 방법

22 Nov 2023

javascript

PhotoSwipe는 웹사이트에 이미지 갤러리 및 슬라이드쇼를 구현할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 이미지 마우스 오버 효과를 구현하는 방법을 알아보겠습니다.

1. PhotoSwipe 라이브러리 설치

먼저, PhotoSwipe 라이브러리를 다운로드하고 웹 페이지에 추가해야 합니다. 다음의 링크에서 최신 버전을 다운로드하세요.

PhotoSwipe 공식 사이트: https://photoswipe.com/

다운로드한 파일을 웹 페이지의 적절한 위치에 추가하세요. 예를 들어, 다음과 같이 <head> 태그 안에 스타일시트와 자바스크립트 파일을 추가할 수 있습니다.

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

2. HTML 마크업 작성

이제 이미지 마우스 오버 효과를 적용할 HTML 마크업을 작성해야 합니다. 예를 들어, 이미지의 부모 요소에 data-pswp-uid 속성을 추가하고, data-size 속성에 이미지의 원본 크기를 지정할 수 있습니다.

<div class="gallery" data-pswp-uid="gallery">
  <figure>
    <a href="path/to/image1.jpg" data-size="800x600">
      <img src="path/to/thumbnail1.jpg" alt="Image 1">
    </a>
    <figcaption>Image 1</figcaption>
  </figure>
  <figure>
    <a href="path/to/image2.jpg" data-size="1024x768">
      <img src="path/to/thumbnail2.jpg" alt="Image 2">
    </a>
    <figcaption>Image 2</figcaption>
  </figure>
  ...
</div>

3. 자바스크립트 초기화

마지막으로, 자바스크립트 코드를 사용하여 PhotoSwipe를 초기화하고 이미지 마우스 오버 효과를 적용해야 합니다.

<script>
  // 자바스크립트를 사용하여 PhotoSwipe 초기화
  var gallery = new PhotoSwipe(document.querySelector('.gallery'), PhotoSwipeUI_Default, items, options);
  gallery.init();

  // 이미지 마우스 오버 효과 적용
  var thumbnails = document.querySelectorAll('.gallery figure');
  thumbnails.forEach(function(thumbnail) {
    thumbnail.addEventListener('mouseover', function() {
      // 마우스 오버할 때 처리할 작업
      // 예: 이미지 확대, 투명도 변경 등

    });
    thumbnail.addEventListener('mouseout', function() {
      // 마우스 아웃될 때 처리할 작업
      // 예: 이미지 축소, 투명도 원래대로 등

    });
  });

</script>

위의 예제 코드에서 items는 PhotoSwipe에 표시될 이미지 정보를 포함하는 배열이며, options는 PhotoSwipe의 옵션을 설정하는 객체입니다.

이제 웹 페이지에서 위의 코드를 사용하여 PhotoSwipe를 초기화하고 이미지 마우스 오버 효과를 적용할 수 있습니다.

더 많은 사용 방법과 옵션에 대해서는 PhotoSwipe 공식 사이트를 참고하세요.