Mosaic Gallery

Appearance

mosaicgallery / MosaicGallery

Class: MosaicGallery ​

Defined in: gallery.ts:28

The main gallery class used to construct a Mosaic Gallery. This class will automatically discover all images contained in the associated HTMLElement and arrange them in the configured layout. Additionally, it will automatically adjust the layout when the size of the gallery changes.

Example ​

ts
const gallery = new MosaicGallery(element, {
 debounceDuration: 5,
 layout: {
   type: "justified",
   targetRowHeight: 100,
   margin: [5, 5],
 },
});

Constructors ​

Constructor ​

new MosaicGallery(gallery, config): MosaicGallery

Defined in: gallery.ts:53

Construct a new gallery from the given HTMLDivElement. It must contain only elements which should be part of the gallery and each element must be found through the GalleryConfig#elementSelector selector. Each element must contain exactly one HTMLImageElement which consists of the image being shown. The exact look of the gallery can be configured through the GalleryConfig. This class will automatically observe whether the size of the gallery changes and adjust the layout accordingly. The gallery can be configured with different layouts and various effects. For the full configuration options look at GalleryConfigImpl.

Parameters ​

HTMLDivElement

the html element whose children should be used to create the gallery

config ​

GalleryConfig

the configuration for the gallery

Returns ​

MosaicGallery

Methods ​

destroy() ​

destroy(): void

Defined in: gallery.ts:70

Destroy this gallery and stop updating the layout on size changes. Any css classes applied by the gallery are removed, however the calculated sizes will not be modified. If you need the gallery to be removed, the associated HTMLElement should be removed by the user.

Returns ​

void

layout() ​

layout(force?): void

Defined in: gallery.ts:167

Start layouting the images in the gallery. Not all images need to have their dimensions set already, however the layout will be stopped, when such an image is encountered and this function has to be called again.

Parameters ​

force? ​

boolean = false

whether to force a new layout, even when nothing changed

Returns ​

void

reconfigure() ​

reconfigure(config): void

Defined in: gallery.ts:98

Apply the new config to this gallery.

Parameters ​

config ​

GalleryConfig

the new configuration

Returns ​

void

updateElements() ​

updateElements(): void

Defined in: gallery.ts:106

Find any new elements and remove old ones.

Returns ​

void