lightblocks.js

lightblocks.js is a content-focused photo gallery using a horizontal masonry layout that automatically rescales in lightbox mode.

Visit ericleong.github.io/lightblocks.js for a demo.

usage

First, include lightblocks.css and lightblocks.js with your page.

Then, run lightblocks.create() after on the element that contains your images. Make sure to also add the lightblocks class to the element, and to only run create() after the images have loaded.

window.onload = function() {
	lightblocks.create(document.getElementById('lightblocks'));
};

A high resolution image will be loaded in lightbox mode from the url specified in the data-highres attribute.

<img src="//mysite.com/awesome.jpg" data-highres="//mysite.com/awesomer.jpg" />