Options

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

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

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 column.
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
selectionMode Boolean false

This option enables the selection mode, and implies selectable.

The selection mode is active as long as at least one item is selected. While the selection mode is active, all checkboxes are visible, a click anywhere on an item toggles its selection instead of opening the lightbox, following the link or emitting the activate event, a shift click selects all the items since the last clicked item, and Escape unselects all items. If lightbox is true, a zoom button at the top right corner of each item opens the lightbox.

A long press on an item selects the item, activates the selection mode, and starts a drag that gives the same selection status to all the items under the pointer path. In selection mode, a mouse drag starts without the long press.

 Docs
touchLongPress Boolean true

This option enables the long press on touch devices, and requires selectionMode.

The long press of the gallery replaces the long press of the system, like the context menu or the preview of the image. Set to false to keep the long press of the system on touch devices.
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.
objectFit string cover

Applies a "object-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.
objectPosition string center

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