Flickr-like Image Matrix Display Module in Vanilla JavaScript

Photo grid box is a vanilla JavaScript library for displaying images in a responsive justified grid layout as you’ve seen on Flickr and Google Image Search.

responsive image grid codepen, image grid css, javascript image gallery with thumbnails, image gallery html css, css image gallery with thumbnails

How to make use of it:

1. Install and import iPhoto-Network-Box-Vanilla.

# NPM
$ npm i photo-grid-box-vanilla

import { PhotoGridBox } from 'photo-grid-box-vanilla';

2. Or load the photo-grid-box-vanilla.min.css and JavaScript photo-grid-box-vanilla.min.js stylesheet into an HTML document.

<link rel="stylesheet" href="css/photo-grid-box-vanilla.min.css" />
<script src="photo-grid-box-vanilla.min.js"></script>

3. Create a container to hold the photo grid.

<div id="container"></div>

4. Create a group of photos to be present in the photo grid.

const imgs = [
      {
        src: '1.jpg',
        payload: {
          title: 'Image 1' 
        }
      },
      {
        src: '2.jpg',
        payload: {
          title: 'Image 2' 
        }
      },
     '3.jpg',
     // more images
];

5. Configure the photo grid.

const element = document.querySelector('#container');
const photoGrid = new PhotoGridBox(element, imgs);

6. Available parameters:

new PhotoGridBox(insertPoint, imgs, imgOnClick, panelHTMLSetter, rowGap, colGap);

7. More API methods.

// append more images to the photo grid
photoGrid.appendImgs(anotherImgArray);
// update the onClick event handler
photoGrid.setImgOnClick(function (e, imgConfig) {
  // do something
});
// update the panelHTMLSetter callback
photoGrid.setPanelHTMLSetter(function (imgConfig) {
  var htmlString = ''
  if (imgConfig && imgConfig.payload && imgConfig.payload.title) {  // use the parameter to reference the payload and create customized panel for each block
    htmlString += '<div class="photo-block__panel__title">'+ imgConfig.payload.title +'</div>'
  }
  return htmlString
});
// By default, the PhotoGridBox will hide the last row if the last row is not complete; to make it looks more natural when loading pictures chunk by chunk. When there is no more picture to load, or for any reason, you can use the method to cancel the feature.
photoGrid.setShowUnCompleteRow(true);
// destroy the photo grid
photoGrid.destroy();

Flickr-like Photo Grid In Vanilla JavaScript, photo-grid-box-vanilla Plugin/Github