Lightbox Example

Mosaic Gallery itself does not come with its own lightbox. However, it should be compatible to most existing lightboxes. An onImageReady callback is provided in the configuration, which can be used to setup some state on the gallery elements if the size of each image is required. It is called as soon as the size of the image is available.

PhotoSwipe

We will show how PhotoSwipe can be implemented with the help of the onImageReady callback. It requires each element to be a link element (<a>) and have a data-pswp-width and data-pswp-height attribute that provide the exact image dimensions.

Setup is really simple. We use the onImageReady callback to set the required attributes and specify the correct css selectors for gallery and gallery elements.

import { MosaicGallery } from "mosaicgallery";
import "mosaicgallery/style.css";

const galleryElement = document.querySelector<HTMLDivElement>("#my-gallery");
if (galleryElement) {
  const gallery = new MosaicGallery(galleryElement, {
    onImageReady: (image) => {
      if (!image.width || !image.height)
        throw new Error("Image size not known!");
      image.element.setAttribute("data-pswp-width", image.width.toString());
      image.element.setAttribute("data-pswp-height", image.height.toString());
    },
  });
}

import PhotoSwipeLightbox from "photoswipe/lightbox";
import "photoswipe/style.css";

const lightbox = new PhotoSwipeLightbox({
  gallery: "#my-gallery",
  children: ".mosaic-gallery-element",
  pswpModule: () => import("photoswipe"),
});
lightbox.init();