zoomwall.js is a content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.
Visit ericleong.github.io/zoomwall.js for a demo.
install
For those using npm
$ npm install zoomwall.js
usage
html
First, add a reference to zoomwall.css in your HTML file, like this:
<link rel="stylesheet" type="text/css" href="zoomwall.css" />
Add the zoomwall class to the container element.
responsive images
To have the browser determine when to load a high resolution image, use responsive images.
<div id="gallery" class="zoomwall"> <img srcset="01_lowres.jpg 200w, 01_highres.jpg 800w" sizes="(max-width: 1200px) 200px, 800px" src="01_lowres.jpg" /> <img srcset="02_lowres.jpg 200w, 02_highres.jpg 800w" sizes="(max-width: 1200px) 200px, 800px" src="02_lowres.jpg" /> </div>
high resolution image
Include high resolution photos using the data-highres attribute of each <img> tag.
<div id="gallery" class="zoomwall"> <img src="01_lowres.jpg" data-highres="01_highres.jpg" /> <img src="02_lowres.jpg" data-highres="02_highres.jpg" /> </div>
javascript
See documentation. Remember to import the module.
import * as zoomwall from "zoomwall.js";
Run zoomwall.create() on the container element (#gallery in this example), after they have loaded.
window.onload = function () { zoomwall.create(document.getElementById("gallery")); };
Enable support for paging through photos with the left and right arrow keys by setting the second argument to true, like this: zoomwall.create(<element>, true).