songtianlun
905ec35fd8
- Integrate PhotoSwipe library for enhanced image viewing - Create PhotoSwipeLightBoxController to manage images - Register lightbox controller in Stimulus framework - Update views to include lightbox functionality - Modify styles to accommodate new design elements This commit introduces a new way for users to view images with PhotoSwipe, improving the interactivity of the photo gallery. It also includes adjustments to the layout and styles for better presentation and user experience.
42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm'
|
|
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm'
|
|
import 'photoswipe/dist/photoswipe.css'
|
|
|
|
export default class extends Controller {
|
|
static targets = ['image', 'gallery']
|
|
|
|
connect() {
|
|
this.initPhotoSwipeLightbox()
|
|
}
|
|
|
|
initPhotoSwipeLightbox() {
|
|
const lightbox = new PhotoSwipeLightbox({
|
|
gallery: this.galleryTarget,
|
|
children: 'a',
|
|
pswpModule: PhotoSwipe,
|
|
initialZoomInEndEvent: 'mousedown',
|
|
dataSource: (items) => {
|
|
return items.map((item) => ({
|
|
src: item.dataset.pswpSrc,
|
|
w: parseInt(item.dataset.pswpWidth, 10),
|
|
h: parseInt(item.dataset.pswpHeight, 10),
|
|
title: item.dataset.pswpCaption,
|
|
}))
|
|
},
|
|
padding: { top: 0, bottom: 0, left: 0, right: 0 }, // 自定义图片与页面边界的填充
|
|
closeOnScroll: false,
|
|
zoom: true, // 启用缩放功能
|
|
bgOpacity: 0.9, // 背景透明度
|
|
pswpUIOptions: {
|
|
arrowPrev: true,
|
|
arrowNext: true,
|
|
zoom: true, // 添加缩放按钮
|
|
fullscreen: true, // 添加全屏按钮
|
|
counter: true, // 显示当前图片编号
|
|
}
|
|
})
|
|
lightbox.init()
|
|
// console.log('PhotoSwipeLightbox instance:', lightbox);
|
|
}
|
|
} |