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

Preview:

Description:

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

Installation:

# NPM
$ npm i zoomwall.js --save

How to use it:

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

import * as zoomwall from "./lib/zoomwall.js";

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

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

3. 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>.

4. 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>

5. Initialize the photo gallery.

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

6. Enable keyboard navigation on the gallery.

zoomwall.create(document.getElementById("gallery"), true);

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

zoomwall.keys();

Changelog:

v2.1.1 (10/18/2022)

• Fix lightbox issue for galleries with more than ten rows
• Many dependency updates

v2.0.3 (01/22/2022)

• Fixes an issue so that zoomwall.js and zoomwall.css should be included in the package now.
• Many dependency updates.

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