karaolidis/caldwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dynamic photoswipe padding

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2025-08-15 09:03:28 +03:00
parent 140a6b938e
commit d9dcea0e41
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/main.js
View File

@@ -1,8 +1,6 @@
import PhotoSwipeLightbox from "photoswipe/lightbox"; import PhotoSwipeLightbox from "photoswipe/lightbox";
import Masonry from "masonry-layout"; import Masonry from "masonry-layout";
const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
gallery: ".lightbox", gallery: ".lightbox",
children: ".pswp-image", children: ".pswp-image",
@@ -10,12 +8,16 @@ const lightbox = new PhotoSwipeLightbox({
hideAnimationDuration: 300, hideAnimationDuration: 300,
initialZoomLevel: "fit", initialZoomLevel: "fit",
pswpModule: () => import("photoswipe"), pswpModule: () => import("photoswipe"),
padding: { paddingFn: () => {
top: lightboxCaptionHeight, const captionHeight =
bottom: lightboxCaptionHeight, 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
left: 0, return {
right: 0, top: captionHeight,
} bottom: captionHeight,
left: 0,
right: 0,
};
},
}); });
lightbox.on("uiRegister", function () { lightbox.on("uiRegister", function () {