48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|
import Masonry from "masonry-layout";
|
|
|
|
const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
|
|
const lightbox = new PhotoSwipeLightbox({
|
|
gallery: ".lightbox",
|
|
children: ".pswp-image",
|
|
showAnimationDuration: 300,
|
|
hideAnimationDuration: 300,
|
|
initialZoomLevel: "fit",
|
|
pswpModule: () => import("photoswipe"),
|
|
padding: {
|
|
top: lightboxCaptionHeight,
|
|
bottom: lightboxCaptionHeight,
|
|
left: 0,
|
|
right: 0,
|
|
}
|
|
});
|
|
|
|
lightbox.on("uiRegister", function () {
|
|
lightbox.pswp.ui.registerElement({
|
|
name: "caption",
|
|
order: 9,
|
|
isButton: false,
|
|
appendTo: "root",
|
|
onInit: (el, _) => {
|
|
lightbox.pswp.on("change", () => {
|
|
const element = lightbox.pswp.currSlide.data.element;
|
|
el.innerHTML =
|
|
element?.parentElement.querySelector(".pswp-caption-content")
|
|
?.innerHTML || "";
|
|
});
|
|
},
|
|
});
|
|
});
|
|
|
|
lightbox.init();
|
|
|
|
const masonryContainers = document.querySelectorAll(".masonry");
|
|
masonryContainers.forEach((container) => {
|
|
new Masonry(container, {
|
|
itemSelector: ".grid-item",
|
|
columnWidth: ".grid-sizer",
|
|
percentPosition: true,
|
|
});
|
|
});
|