Versatile Mobile-friendly Photo Gallery – Natural Gallery JS

The Natural Gallery JS JavaScript library lets you create a responsive, mobile-friendly photo gallery with lightbox integrated on the web.

Features:

• 4 gallery layouts: Natural, Masonry, Square, and Responsive square.
• Infinite scroll: auto loads more images into the gallery on scroll.
• Image lazy load.
• Display images in a lightbox popup. Requires PhotoSwipe.
• You can navigate between the images with touch swipe events.
• Allows you to zoom in/out images.

How to use it:

Install & Download.

# Yarn
$ yarn add @ecodev/natural-gallery-js
# NPM
$ npm install @ecodev/natural-gallery-js --save

Include the necessary JavaScript and CSS files on the page.

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

Create a container to hold the photo gallery.

<div id="gallery"></div>

Initialize the photo gallery.

var myGallery = document.getElementById('gallery');
// Natural Layout
var gallery = new NaturalGallery.Natural(myGallery);
// Masonry Layout
var gallery = new NaturalGallery.Masonry(myGallery);
// Square Layout
var gallery = new NaturalGallery.Square(myGallery);
// Responsive Square Layout
var gallery = new NaturalGallery.ResponsiveSquare(myGallery);

Add images to the photo gallery.

var items = [
     {
        thumbnailSrc: 'thumb.jpg',
        thumbnailWidth: 400,
        thumbnailHeight: 300,
        enlargedSrc: 'large.jpg',
        enlargedWidth: '1200',
        enlargedHeight: '900,
        title: 'Image 1',
        link: '#', 
        linkTarget: '_blank' // _blank | _top | _self | _parent
        color: '#ccc' // bg color
    };
];
// insert images to the gallery
gallery.setItems(items);
// Add more images
gallery.addItems(itemsSet);

Default settings.

var gallery = new NaturalGallery.Natural(myGallery,{
    // space between images
    gap: 3,
    // how many rows per page
    rowsPerPage: 0,
    // hover, always and never
    showLabels: 'hover'
    
    // enable lightbox
    lightbox: false,
    // photosipw options
    photoSwipeOptions: null,
    // the number of rows to display when gallery initialises  
    minRowsAtStart: 2,
    // is selectable?
    selectable: false,
    // the distance from the bottom of the gallery to offset the detection of the scroll event.
    infiniteScrollOffset: 0 
    
});

API methods.

// insert images
gallery.setItems(items)
// add new images
addItems(items)
// add event listener
addEventListener(string, fn)
// clear the gallery
clear()
// select visible images
selectVisibleItems() 
// unselect all images
unselectAllItems()