Versatile Mobile-friendly Photo Gallery – Natural Gallery JS

Category: Gallery , Javascript | October 5, 2018
Views Total:2,811 views
Official Page:Go to website
Last Update:October 5, 2018


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.


  • 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 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
// Add more images

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
// add new images
// add event listener
addEventListener(string, fn)
// clear the gallery
// select visible images
// unselect all images

You Might Be Interested In:

Leave a Reply