Package Exports

zoomwall.js
zoomwall.js/lib/zoomwall.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (zoomwall.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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