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);