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

Category: Gallery , Javascript | August 11, 2020
Author:ericleong
Views Total:437 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:


One thought 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

Leave a Reply