1. Include basic assets

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

<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. Include placeholder markup

The minimal HTML below doesn't include the lightbox template. See the lighbox section for more details.

            <div id="body" style="overflow:auto; min-height:100%; height:100%;">
                <div id="gallery"></div>
            </div>
        

3. 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
    gallery.init();
})

4. 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
gallery.setItems(items);

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

Enjoy

You can continue with options , api and theming .