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.

Image may be NSFW.
Clik here to view.

Live example on jsfiddle: http://jsfiddle.net/edlea/uZv3n/ or have a look at the DEMO

DOWNLOAD

Basic Usage

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

Getting Started

/* In your CSS */
.Collage{
/* define how much padding you want in between your images */
 padding:10px;
}
.Collage img{
/* ensures padding at the bottom of the image is correct */
 vertical-align:bottom;
/* hide the images until the plugin has run. the plugin will reveal the images*/
 opactiy:0;
}

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

<!-- In your HTML -->
<div class="Collage">
<img src="http://placehold.it/350x150"><img src="http://placehold.it/400x300"><img src="http://placehold.it/290x800">
</div>

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

$('.Collage').removeWhitespace().collagePlus();
You may want to run the plugin with an image loader like https://github.com/desandro/imagesloaded, alternatively you can try it with
$(window).load(function () {
 $('.Collage').collagePlus();
});

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

Notes

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.

License

Dual licensed under the MIT or GPL Version 2 licenses.

http://www.opensource.org/licenses/mit-license.php

http://www.opensource.org/licenses/GPL-2.0