이미지 갤러리를 구현할 때 사용할 수 있는 PhotoSwipe는 다양한 제스처, 탭, 클릭 등의 사용자 인터랙션을 지원합니다. 이 중에서 키보드 제어 기능을 구현하는 방법을 알아보겠습니다.

PhotoSwipe 라이브러리 추가

먼저, PhotoSwipe 라이브러리를 프로젝트에 추가해야 합니다. 다음 스크립트 태그를 head 태그 내에 추가합니다.

<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

키보드 제어 기능 추가

키보드 제어 기능을 구현하기 위해 PhotoSwipe 객체에 keyboard 옵션을 사용합니다. 이를 통해 각각의 키를 원하는 기능에 매핑할 수 있습니다. 아래의 코드는 우측 키와 좌측 키를 사용하여 다음과 이전 이미지로 이동하는 예제입니다.

var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
    {src: 'path/to/image1.jpg', w: 800, h: 600},
    {src: 'path/to/image2.jpg', w: 800, h: 600},
    {src: 'path/to/image3.jpg', w: 800, h: 600}
];

var options = {
    index: 0,
    keyboard: {
        // 우측 키를 눌렀을 때 다음 이미지로 이동
        39: function() {
            gallery.next();
        },
        // 좌측 키를 눌렀을 때 이전 이미지로 이동
        37: function() {
            gallery.prev();
        }
    }
};

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

위의 코드에서 items 배열에는 갤러리에 포함될 이미지들의 정보를 입력합니다. options 객체에서는 index를 통해 초기 이미지를 설정하고, keyboard 옵션 내부에서 키와 원하는 기능을 매핑합니다.

결과 확인하기

위의 코드를 HTML 파일에 추가한 후에는 키보드의 우측과 좌측 키로 이미지를 변경할 수 있습니다. 원하는 사용자의 키보드 입력에 따라 기능을 추가/수정할 수 있습니다.

참고 자료:

• PhotoSwipe 공식 문서: https://photoswipe.com/documentation/
• PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/PhotoSwipe