CollagePlus – An image gallery plugin for jQuery

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.


CollagePlus An image gallery plugin for jQuery

Live example on jsfiddle: or have a look at the DEMO


Basic Usage

// example HTML image gallery
 <div class="Collage">
 <img src="example1.jpg" />
 <img src="example2.jpg" />
 <img src="example3.jpg" />
// collagePlus-ify it!

Getting Started

/* In your CSS */
/* define how much padding you want in between your images */
.Collage img{
/* ensures padding at the bottom of the image is correct */
/* hide the images until the plugin has run. the plugin will reveal the images*/

Ensure you have no whitespace between your image tags for a clean grid.

<!-- In your HTML -->
<div class="Collage">
<img src=""><img src=""><img src="">

Alternatively, use the jquery.removeWhitespace.js plugin in the extras directory to do this for you e.g.

You may want to run the plugin with an image loader like, alternatively you can try it with
$(window).load(function () {

Browser Resize

By default this behaviour is not included in the plugin but you can use a few lines of js to reload the images if the user resizes the browser window

function collage() {
 'fadeSpeed' : 2000
 var resizeTimer = null;
 $(window).bind('resize', function() {
 // hide all the images until we resize them
 // set the element you are scaling i.e. the first child nodes of ```.Collage``` to opacity 0
 $('.Collage .Image_Wrapper').css("opacity", 0);
 // set a timer to re-apply the plugin
 if (resizeTimer) clearTimeout(resizeTimer);
 resizeTimer = setTimeout(collage, 200);


CollagePlus relies on all images being loaded before it can calculate the layout. It does not run off image sizes specified in the DOM. If you have image sizes available in the DOM then you’re probably better off calculating the layout server-side (assuming that’s where you got the image sizes from) and writing the result directly to the HTML template you’re generating.

Related post:  Trunk.js - Smooth, Responsive & Lightweight Nav Drawer


Dual licensed under the MIT or GPL Version 2 licenses.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>