var options = { ... }
var elementRef = document.getElementById('gallery');

// The gallery accepts a literal as second argument for options
var gallery = new NaturalGallery.Natural(elementRef, options);
gallery.init();

Natural and Responsive Square options

Name Type Default Description Docs
rowHeight Number 400 Maximum height for each row.
ratioLimit Number {min: number, max: number} Prevents narrow images by forcing the ratio to be in the given limits.
min:1 and max:1 produce squares

Square options

Name Type Default Description Docs
itemsPerRow Number 4 Number of columns for grid.

Masonry options

Name Type Default Description Docs
columnWidth Number 300 Maximum width for each row.
ratioLimit Number {min: number, max: number} Prevents narrow images by forcing the ratio to be in the given limits.
min:1 and max:1 produce squares

Options summary for all galleries

Name Type Default Description Docs
gap Number 3 Number of pixels between items
rowsPerPage Number 0 Number of rows per page when positive. When 0, the infinite scroll is activated.
showLabels String hover Defines when the item's labels are shown.
Accepts hover, always and never
lightbox Boolean False Zoom images on click Docs
photoSwipeOptions Literal null Options specific to PhotoSwipe. Docs
minRowsAtStart Number 2 Number of rows to display when gallery initialises
selectable Boolean false Whether the gallery accepts or not items to be selectable by user
activable Boolean false If images have no link, but label has to be rendered as a button. Should be used with activable event Docs
infiniteScrollOffset Number 0

Number of pixels from the bottom of the gallery to offset the detection of the scroll event.

If negative, the infinite scroll will expand the gallery before the bottom is visible in the viewport.

If positive, the infinite scroll will expand the gallery after the bottom enters the viewport. Be sure to have at least as much space free under the gallery or infinite scroll will never expand.

backgroundSize string cover

Applies a "background-size" compatible value to images.

Use "auto" to prevent client side resizing and improve rendering performances. Resizing big pictures is very CPU and bandwidth consuming.

If disabled, be sure the image minimum size is bigger than computed size.

backgroundPosition string center

Applies a "background-position" compatible value to images. For example 0% 100% or top left