Portfolio Generator In Pure JavaScript – Gallery.js

Gallery.js is a pure JS based photo gallery generator which allows you to quickly create a photography portfolio page from JSON data.

How to use it:

Import the gallery.js into your html document.

<script src="gallery.js"></script>

Create a container element for the gallery.

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

Prepare your images in the JSON:

{
  "Group 1": [
    {
      "width": 1500,
      "path": "1.jpg",
      "height": 2000
    },
    {
      "width": 1600,
      "path": "2.jpg",
      "height": 2000
    },
    {
      "width": 1600,
      "path": "3.jpg",
      "height": 2000
    }
  ],
  "Group 2": [
    {
      "width": 1500,
      "path": "4.jpg",
      "height": 2000
    },
    {
      "width": 1500,
      "path": "5.jpg",
      "height": 2000
    },
    {
      "width": 2000,
      "path": "6.jpg",
      "height": 1333
    }
  ],
  ...
}

Initialize the gallery as these:

var COLUMNS = 'columns';
var ROWS = 'rows';
var SQUARES = 'squares';
var columns = COLUMNS;
var rows = ROWS;
var squares = SQUARES;
var layoutStyle = COLUMNS;
var configuration = {
  spacing: 10,
  shuffle: false,
  columns: 3,
  maxHeight: 400
};
var id = 'gallery';
function reqListener() {
  var renderer
  switch (layoutStyle) {
    case COLUMNS:
      renderer = new VerticalRenderer(id);
      break;
    case ROWS:
      renderer = new HorizontalRenderer(id);
      break;
    case SQUARES:
      renderer = new SquareRenderer(id);
      break;
  }
  var config = new Config(JSON.parse(this.responseText), configuration);
  renderer.render(config);
}

window.onload = function() {
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  oReq.open("GET", "config.json");
  oReq.send();
};

Changelog:

10/08/2018

• Fixed a bug that causes the last row to render badly