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.

Installation:

# NPM
$ npm i zoomwall.js --save

How to use it:

Import the zoomwall.js as an ES module as follows:

import * as zoomwall from "zoomwall.js";

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

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

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

<div id="gallery" class="zoomwall">
  <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">
  ...
</div>.

It also supports responsive image delivery since v1.2

<div id="gallery" class="zoomwall">
  <img srcset="lowres.jpg 200w, highres.jpg 800w" sizes="(max-width: 1200px) 200px, 800px" src="lowres.jpg" />
</div>

Initialize the photo gallery.

window.onload = function() {
  zoomwall.create(document.getElementById("gallery"));
};

If you have multiple galleries on the page, call the keys() function after init.

zoomwall.keys();

Changelog:

v2.0.2 (08/11/2020)

• Library has been rewritten in TypeScript, which means a type declaration is now available
• Many type-related bugs have been fixed
• Support Multiple <div> Nesting

07/22/2020

• v1.2.0: Adds support for responsive images.

06/26/2020

• v1.1.2

11/01/2019

• v1.1.1