About Justified.js

jQuery Plugin to Create Justified Images Grid

Justified.js is a jQuery plugin that creates a justified image grid of supplied images. Fill all the spaces! This ineffect creates a elegant image gallery with various sizes of images, where all the images of a row to have the same height.

Ideally, Justified.js tries to show images without modifying its aspect ratio and without cropping them. But want a disposition of the images without cropping them. But, when limited by the maximum row size it sometimes crop images to fill the grid.

How to Use

Lets see some code

To get started you'll have to include jquery.justified.images.js and jquery.justified.images.css files in your html file.

<link rel="stylesheet" href="jquery.justified.images.css"> <script src="jquery.justified.images.js"></script>

After this you'll have to intialize this plugin for and container. Sample initialization code is here.

$('.image-container').empty().justifiedImages({ images : photos, rowHeight: 200, maxRowHeight: 400, thumbnailPath: function(photo, width, height){ var purl = photo.url_s; if( photo.url_n && (width > photo.width_s * 1.2 || height > photo.height_s * 1.2) ) purl = photo.url_n; if( photo.url_m && (width > photo.width_n * 1.2 || height > photo.height_n * 1.2) ) purl = photo.url_m; if( photo.url_z && (width > photo.width_m * 1.2 || height > photo.height_m * 1.2) ) purl = photo.url_z; if( photo.url_l && (width > photo.width_z * 1.2 || height > photo.height_z * 1.2) ) purl = photo.url_l; return purl; }, getSize: function(photo){ return {width: photo.width_s, height: photo.height_s}; }, margin: 1 });

Options

See configuration options

Options can also be set programatically, by passing an options hash to the justifiedImages method. The idea behind this plugin is to keep it very flexible, so that it can be used for anytype of images source data. To keep that in mind you must set images , thumbnailPath and getSize during initialization. Details about the same is given below.