Mosaic Gallery

Appearance

mosaicgallery / GalleryConfig

Interface: GalleryConfig ​

Defined in: gallery/config.ts:8

Main configuration object for a MosaicGallery. Configuration can be declared partially and any remaining options will be filled with default options.

Extends ​

Properties ​

debounceDuration? ​

optional 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

Inherited from ​

GalleryConfigImpl.debounceDuration

elementSelector? ​

optional 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"

Inherited from ​

GalleryConfigImpl.elementSelector

hoverEffect? ​

optional 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

Inherited from ​

GalleryConfigImpl.hoverEffect

layout? ​

optional layout?: PartialLayoutConfig

Defined in: gallery/config.ts:10

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

lazyLoading? ​

optional 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>

Inherited from ​

GalleryConfigImpl.lazyLoading

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());
},

Inherited from ​

GalleryConfigImpl.onImageReady