mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
1af92d92c8
- Added a new PhotoSwipe component for image lightbox functionality in the layout. - Enhanced scrollbar component with an auto-hide delay feature. - Updated global styles to improve scrollbar appearance and added styles for PhotoSwipe. - Included new Head layout component for better SEO and meta tag management. - Added images to existing posts for improved visual content. This commit improves user experience with enhanced image viewing and layout consistency.
52 lines
2.4 KiB
Text
52 lines
2.4 KiB
Text
<script>
|
|
import PhotoSwipeLightbox from 'photoswipe/lightbox'
|
|
import 'photoswipe/style.css'
|
|
|
|
// Store lightbox instance for later use
|
|
let lightbox: PhotoSwipeLightbox | null = null
|
|
const pswp = import('photoswipe')
|
|
|
|
// Initialize PhotoSwipe lightbox with custom configuration
|
|
function createPhotoSwipe() {
|
|
lightbox = new PhotoSwipeLightbox({
|
|
gallery: 'article img',
|
|
pswpModule: () => pswp,
|
|
closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
|
|
zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
|
|
wheelToZoom: true,
|
|
arrowPrev: false,
|
|
arrowNext: false,
|
|
imageClickAction: 'close',
|
|
tapAction: 'close',
|
|
doubleTapAction: 'zoom',
|
|
})
|
|
|
|
// Add custom filter to handle image data and dimensions
|
|
lightbox.addFilter('domItemData', (itemData: any, element: Element) => {
|
|
if (element instanceof HTMLImageElement) {
|
|
itemData.src = element.src
|
|
itemData.w = Number(element.naturalWidth || window.innerWidth)
|
|
itemData.h = Number(element.naturalHeight || window.innerHeight)
|
|
itemData.msrc = element.src
|
|
}
|
|
return itemData
|
|
})
|
|
|
|
lightbox.init()
|
|
}
|
|
|
|
// Cleanup function to destroy lightbox instance
|
|
function cleanup() {
|
|
if (lightbox) {
|
|
lightbox.destroy()
|
|
lightbox = null
|
|
}
|
|
}
|
|
|
|
// Initialize PhotoSwipe when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
createPhotoSwipe()
|
|
})
|
|
|
|
document.addEventListener('astro:before-swap', cleanup)
|
|
</script>
|