1. Include basics assets

The minimal imports bellow don't include dependencies. The zoom in lightbox for example requires PhotoSwipe and needs either to include it by yourself or by including full version of natural gallery assets. See lighbox section for more.

<link rel="stylesheet" href="assets/natural-gallery-js/natural-gallery.css">
<link rel="stylesheet" href="assets/natural-gallery-js/themes/natural.css">
<script src="assets/natural-gallery-js/natural-gallery.js" defer></script>

2. Code initialisation

In vanilla javascript (ES5) be sure to execute gallery initialization after the page is ready and assets are loaded.

window.addEventListener('load', function() {

    // Get reference of gallery container
    var elementRef = document.getElementById('gallery');

    // Init gallery according to wanted format
    var gallery = new NaturalGallery.Natural(elementRef); // or
    var gallery = new NaturalGallery.Masonry(elementRef); // or
    var gallery = new NaturalGallery.Square(elementRef); // or
    var gallery = new NaturalGallery.ResponsiveSquare(elementRef);

    // Init the gallery

3. Add images

All galleries share some options, but they have specific options too. You can find them on their dedicated page.

// Convert your format into natural-gallery's format.
var items = [
        thumbnailSrc: string, // link to thumbnail image
        enlargedSrc: string, // link to enlarged image
        enlargedWidth: number,
        enlargedHeight: number,
        title: string, // Title for the label or button
        link: string, // Link, transforms label into button
        linkTarget: string // _blank | _top | _self | _parent
        color: string // HEX color for background before image display
        backgroundPosition: string // Any value compatible with css background-position. Default: center
        backgroundSize: string // Any value compatible with css background-size. Default : cover

// Set the entire collection

// Increment an existing collection.
gallery.addItems(itemsSet1); // the first call as the same effect as setItems()


You can continue with options , api and theming .