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

Category: Gallery , Javascript | August 11, 2020
Author: ericleong
Views Total: 1,309 views
Official Page: Go to website
Last Update: August 11, 2020
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 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

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