Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

Preview:

Description:

zoomwall.js is a JavaScript library for creating a neat, compact thumbnail grid which expands into a fullscreen gallery lightbox as you click on a thumbnail image.

How to use it:

Import the required zoomwall.css stylesheet in the head section.

<link rel="stylesheet" href="zoomwall.css">

Import the zoomwall.js script into your document, before the closing body tag.

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

Add thumbnails with data-highres attribute pointing to the high resolution photos into your document.

<img src="thumb-1" data-highres="highres-1.jpg">
<img src="thumb-2" data-highres="highres-2.jpg">
<img src="thumb-3" data-highres="highres-3.jpg">
<img src="thumb-4" data-highres="highres-4.jpg">
  ...

Initialize the photo gallery.

window.onload = function() {
  zoomwall.create(document.getElementById('zoomwall'), true);
};