Flickr-like justified photo gallery – jQuery Justified.js

DirectCode | January 10, 2017 | Gallery, jQuery, Plugins | No Comments

Justified.js is a jQuery plugin to create justified image gallery, with customizable grid.

Justified photo gallery with Justified.js

Here we go with a jQuery plugin for creating an elegant justified image grid, that manages the various sizes of images. We know such solutions from the Flickr, Google+ Albums, or Google Image Search. Adjustable number of Photo, row height, and grid margin.

Usage

Just include jquery.justified.images.js and jquery.justified.images.css files in the html document. After this we have to intialize this plugin for and container, for example:

$('.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
});

There are various configuration options – see the documentation for more information.

License: MIT

Homepage with Demo & Docs:

http://nitinhayaran.github.io/Justified.js/demo/

Justified photo Gallery on GitHub:

https://github.com/nitinhayaran/Justified.js