Get new jQuery plugins just once a week

×

zoomwall-js

June 26, 2015

Zoomwall-js | A photo gallery using a horizontal masonry.

Zoomwall-js is a javascript plugin to implement a content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.

Created by Eric Leong

Download

Example

zoomwall-js plugin

gallery

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.

CircleCI

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();
zoomwall-js

Related posts:

jFlickrFeed
Rondell
MixItUp

To install using Bower
bower install zoomwall

zoomwall-js plugin

http://jquer.in/wp-content/uploads/2015/06/zoomwall-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever