PhotoSwipe를 통해 이미지 토스트 알림을 표시하려면 먼저 PhotoSwipe를 웹 페이지에 추가해야 합니다. PhotoSwipe는 CSS 파일과 JavaScript 파일로 구성되어 있으므로 이 두 파일을 웹 페이지에 추가하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="photoswipe.css">
<link rel="stylesheet" href="default-skin/default-skin.css">
<title>PhotoSwipe Toast Notification Example</title>
</head>
<body>
<!-- 이미지 갤러리를 표시할 영역 -->
<div class="my-gallery">
<figure>
<a href="image1.jpg" data-size="1000x667">
<img src="image1-thumb.jpg" alt="Image 1">
</a>
</figure>
<figure>
<a href="image2.jpg" data-size="1200x800">
<img src="image2-thumb.jpg" alt="Image 2">
</a>
</figure>
<!-- 나머지 이미지들도 동일한 구조로 추가 -->
</div>
<script src="photoswipe.min.js"></script>
<script src="photoswipe-ui-default.min.js"></script>
<script>
// PhotoSwipe 초기화
var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, items, options);
gallery.init();
// 토스트 알림 표시 함수
function showToastNotification(message) {
var notification = document.createElement('div');
notification.classList.add('toast-notification');
notification.innerText = message;
document.body.appendChild(notification);
setTimeout(function() {
notification.classList.add('show');
setTimeout(function() {
notification.classList.remove('show');
setTimeout(function() {
document.body.removeChild(notification);
}, 300);
}, 3000);
}, 300);
}
// 이미지 클릭 시 토스트 알림 표시
var galleryItems = document.querySelectorAll('.my-gallery figure');
galleryItems.forEach(function(item) {
item.addEventListener('click', function() {
showToastNotification('이미지를 토스트 알림으로 표시합니다');
});
});
</script>
</body>
</html>
위의 코드는 photoswipe.css, default-skin.css, photoswipe.min.js, photoswipe-ui-default.min.js 파일이 있는 것을 가정하고 작성되었습니다.
위의 예제 코드는 이미지 갤러리를 표시하는 영역과 showToastNotification() 함수를 정의한 부분이 있습니다. showToastNotification() 함수는 토스트 알림을 생성하고 3초 동안 보여준 후 삭제하는 일련의 동작을 처리합니다.
각 이미지의 <a> 태그에 click 이벤트 리스너를 등록하여 이미지를 클릭하면 showToastNotification() 함수를 호출하도록 하였습니다. 이렇게 하면 이미지를 클릭할 때마다 토스트 알림이 표시됩니다.
위의 예제 코드를 웹 페이지에 추가하고, image1.jpg, image1-thumb.jpg와 같은 이미지 파일을 해당 경로에 실제로 존재하도록 준비한 후, 웹 페이지를 열어보면 이미지 갤러리와 클릭할 때마다 토스트 알림이 표시되는 것을 확인할 수 있습니다.
PhotoSwipe를 사용하여 이미지 토스트 알림을 표시하는 방법을 알아보았습니다. PhotoSwipe의 다양한 기능과 설정을 활용하면 토스트 알림 외에도 다양한 사용자 경험을 제공할 수 있습니다. 자세한 내용은 PhotoSwipe 문서를 참고하세요.