Create beautiful photo galleries with ‘Justified Gallery’

Organizing pictures of different sizes into a gallery can be a hard task, but using ‘Justified Gallery’, you can make good-looking — and responsive — photo galleries in minutes. ‘Justified Gallery’ is written in javascript, and renders the photos the same way as Flickr.

First of all, you need to include the script and stylesheet, which you can find on the project homepage. Since this is a jQuery plugin, you must also include jQuery…

Now you’re ready to go.
The basic HTML code for the gallery looks like this:

<div id="gallery">
    <a href="path/to/image1.jpg">
        <img alt="Caption for my image" src="path/to/image1_thumbnail.jpg" />
    </a>
    <a href="path/to/image2.jpg">
    	    <img alt="Another caption" src="path/to/image2_thumbnail.jpg" />
    </a>
    ...
</div>

After you’ve created the HTML for your gallery,  you need to run justifiedGallery on that div.
Somewhere on the page you put a script tag, or you make a separate javascript file for it.

$( document ).ready(function() {
    $("#gallery").justifiedGallery(
    {
    	    rowHeight : 250,
    	    lastRow : 'nojustify',
    	    margins : 5
    }
    );
});

The rowHeight defines the height that ‘Justified Gallery’ will match. Depending on the set of images it may be a bit different:

However, the justification may resize the images, and, as a consequence, the row height may be a little bit different than 160px. This means that the row height is intended as your preferred height, and it is not an exact measure. If you want that the row height remains strictly fixed, you can use the fixedHeight option: this option will crop the images a little bit to make sure that the row height doesn’t change.

lastRow defines how the last row will be handled. If you want empty space after the last image, use nojustify. If you want the last row to fill the whole page width, use justify. You can also hide the row using hide.

Obviously margins sets the margin (in pixels) between the images.

‘Justified Gallery’ is very well documented on the project homepage. Take a look there for the various other options!