Author: | ericleong |
---|---|
Views Total: | 878 views |
Official Page: | Go to website |
Last Update: | January 22, 2022 |
License: | MIT |
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.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
Sorry, I’m a total noob. Where does the “initialize photo gallery” code go exactly? The HTML? The CSS? Thanks!
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.