Mosaic Gallery

Appearance

mosaicgallery / GalleryConfigImpl

Interface: GalleryConfigImpl ​

Defined in: gallery/config.ts:39

All configuration options for a MosaicGallery.

Properties ​

debounceDuration ​

debounceDuration: number

Defined in: gallery/config.ts:49

The number of milliseconds to wait before redrawing the layout when the size changes.

Default ​

ts
0

elementSelector ​

elementSelector: string

Defined in: gallery/config.ts:44

The selector to select all elements which should be added to the gallery.

Default ​

ts
".mosaic-gallery-element"

hoverEffect ​

hoverEffect: string

Defined in: gallery/config.ts:73

The effect applied to an image when hovered above it with the mouse.

Default ​

ts
HoverEffect.None

layout ​

layout: JustifiedLayoutConfig | MasonryLayoutConfig

Defined in: gallery/config.ts:109

Which layout to use for the gallery. See the docs for all available options.

Default ​

JustifiedLayoutConfig

lazyLoading ​

lazyLoading: Boolean

Defined in: gallery/config.ts:67

Whether lazy loading is enabled. Disabling this can save resources when lazy loading is not used. Every image element in the gallery with a 'mscglry-data-src' attribute will have this attribute moved to the regular src attribute as soon as the image is scrolled into view.

Default ​

ts
false

Example ​

An example element for lazy loading:

html
<a class="mosaic-gallery-element" href="/high-resolution-image.jpg"
    ><img src="/small-thumbnail.jpg" mscglry-data-src="/high-resolution-image.jpg"
/></a>

onImageReady? ​

optional onImageReady?: (data) => void

Defined in: gallery/config.ts:103

Callback called whenever an image was loaded and its dimensions are known. This can e.g. be used to add the image size to each element for a lightbox. Do note that this function is also called for the first version of the image that is loaded. I.e. when lazy loading is enabled, this function is called with the dimensions of the initial low resolution image. However, it will also be called again as soon as the full resolution lazy loaded image is loaded.

To be precise, the first time this function is called, it is called with the dimensions obtained from the following priority:

  1. dimensions of the initial image, when the image is already loaded when the gallery is constructed
  2. dimensions in the html width/height attribute of the image when present
  3. dimension of the initial image, when the image wans't loaded when the gallery is constructed Then, it is called again with the dimensions of the lazy loaded image.

Parameters ​

data ​

GalleryImage

the gallery element with its size populated

Returns ​

void

Default ​

ts
undefined

Example ​

ts
onImageReady: (image) => {
 if (!image.width || !image.height)
   throw new Error("Image size not known!");
 image.element.setAttribute("lightbox-width", image.width.toString());
 image.element.setAttribute("lightbox-height", image.height.toString());
},