zoomwall.js

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 bower

$ bower install zoomwall

For those using npm

$ npm install zoomwall.js

usage

html

First, add a reference to zoomwall.js and zoomwall.css in your HTML file, like this:

<link rel="stylesheet" type="text/css" href="zoomwall.css" />
<script type="text/javascript" src="zoomwall.js"></script>

Add the zoomwall class to the container element. Include high resolution photos using the data-highres attribute of each <img> tag.

<div id="gallery" class="zoomwall">
    <img src="./images/01_lowres.jpg" data-highres="./images/01_highres.jpg" />
    <img src="./images/02_lowres.jpg" data-highres="./images/02_highres.jpg" />
</div>

javascript

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).

If there are multiple galleries, call zoomwall.keys() after loading the last gallery.

zoomwall.create(document.getElementById('first-gallery'));
zoomwall.create(document.getElementById('second-gallery'));
zoomwall.keys();