Versatile Mobile-friendly Photo Gallery – Natural Gallery JS

Category: Gallery , Javascript | October 5, 2018
Author: Ecodev
Views Total: 1,195
Official Page: Go to website
Last Update: October 5, 2018
License: MIT

Preview:

Versatile Mobile-friendly Photo Gallery – Natural Gallery JS

Description:

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

You Might Be Interested In:


Leave a Reply