jQuery

Justified.js: Create Image Galleries in jQuery

Justified.js lets you create image galleries in jQuery. Rather than cropping, it tries to show the images at their original aspect ratio, and the image galleries are “justified” by default.

How does a “justified” image grid work? The idea is simple: all images of a given row should have the same height. So unless Justified.js is limited by the maximum row size, it will not crop images to fit the grid. 

justified-js-gallery

Mode of Operation

First up, add jquery.justified.images.js and jquery.justified.images.css to your HTML file. This is how to do it:

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

Thereafter, you just need to initialize the plugin for your container, and you are good to go. Here is a short example of how to accomplish that:


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

Justified.js also comes with its own set of options that you can tweak to suit your needs.

Appraisal

Justified.js is a very useful plugin for anyone looking to create image galleries in jQuery. You can use images of different sizes and dimensions, and this plugin will still create justified image galleries — most likely without modifying the aspect ratio and without cropping the images.

Justified is fully free and open source, and comes with an MIT License.


Liked what you read?

Sign up for the Code Carbon Newsletter and receive weekly updates about new resources, tools as well as deals and discounts on awesome services.

One email per week; no spam, no nonsense; unsubscribe anytime.