Automatic Image Montage with jQuery

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

Having a white space in the end of the container can, as well, be avoided optionally. The last image of the montage can fill the left space, so that the montage will be left gap-less.

Another option that can be useful in some cases is the possibility to only allow that the height of all images will be the height of the smallest image, avoiding that any picture gets pixelated/enlarged. (The default options will allow the enlargement of smaller images if there is a significantly higher number of larger images in the set.)

The images used in the demos are by Andrey Yakovlev & Lili Aleeva. They are licensed under the Attribution-NonCommercial 3.0 Unported License.

The HTML structure

Simply put the images that you want to use in the montage into a container with the following class (the ID is used to call the plugin then):

<div class="am-container" id="am-container">
	<a href="#"><img src="images/1.jpg" title="Image 1"></img></a>
	<a href="#"><img src="images/2.jpg" title="Image 2"></img></a>
	<a href="#"><img src="images/3.jpg" title="Image 3"></img></a>
	...
</div>

The default style that we give to this container and the images is the following:

.am-wrapper{
	float:left;
	position:relative;
	overflow:hidden;
}
.am-wrapper img{
	position:absolute;
	outline:none;
}

Since we don’t define any width for the container, the above example will show the montage in fullscreen.

If you would like to use a container with a fixed width, you can simply add a width.

In case you’d like to have a container with a fixed height and width and with a vertical scrollbar, then you need to add another wrapper around the container:

<div style="width:800px;height:300px;overflow-y:scroll; margin:40px auto;">
	<div class="am-container" id="am-container">
	...
	</div>
</div>

Options

There are several options for this plugin. The default ones are the following:

// If you use percentages (or no width at all)
// for the container's width, then set this to true.
// This will set the body's overflow-y to
// 'scroll' (fix for the scrollbar's width problem)
liquid					: true, 

// Space between images in pixels
margin					: 1,	

// The minimum width that a picture should have
minw					: 70,	

// The minimum height that a picture should have
minh					: 20,	

// The maximum height that a picture should have
maxh					: 250,	

// Alternate the height value for every row.
// If true this has priority over defaults.fixedHeight
alternateHeight			: false,
// The height will be a random value between 'min' and 'max':
alternateHeightRange	: {
	min	: 100,
	max	: 300
},

// If the following value is set, this will
// have priority over defaults.minsize.
// All images will have this height:
fixedHeight				: null,	

// Setting this value will make minw, minh irrelevant.
// Chosen height will be the one of the smallest image
// when this is set to true:
minsize					: false,

// If true, there will be no gap in the end
// of the container. The last image will
// fill any white space left:
fillLastRow				: false

There are quite some possibilities with these options and some of them can be seen in the demos (you can jump to the other demos in each example):

• Example 1: Fullscreen liquid example with alternating heights, last image will fill the last row. Refresh the browser to see a different arrangement
• Example 2: Fullscreen liquid example with alternating heights and no margin, last image will fill the last row
• Example 3: Fullscreen liquid example with alternating heights and bigger margin, last image will fill the last row
• Example 4: Fixed width container example with fixed height for images. Click “load more” (end of page) in order to see how more images can be added
• Example 5: Fixed width and height of a wrapper with scrollbar, last image will fill the last row
• Example 6: Minimum width of images with alternating heights of rows and large margin, last image will fill the last row. Click “load more” (end of page) in order to see how more images can be added
• Example 7: Liquid container example with fixed height for images. Resize the browser to see the change
• Example 8: Guarantees that no image will be pixelated by choosing the minimum height available (last image cannot fill the last row). Click “load more” (end of page) in order to see how more images can be added

In each example you can view which options were used to achieve the layout/functionality.

Hope you find it useful, feedback is welcome!