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