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

Category: Gallery , Javascript | October 18, 2022
Author:ericleong
Views Total:1,048 views
Official Page:Go to website
Last Update:October 18, 2022
License:MIT

Preview:

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

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

You Might Be Interested In:


2 thoughts on “Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

  1. Shawn

    Sorry, I’m a total noob. Where does the “initialize photo gallery” code go exactly? The HTML? The CSS? Thanks!

    Reply
  2. Hozefa

    Good image gallery, but one important thing is missing in this gallery is the control to handle number of images per row to show. This can control the number of images to show in desktop and mobile view too.

    Reply

Leave a Reply