jQuery Collage Plugin

I’d like to share with you a jQuery plugin I wrote that allows me to turn a canvas into a collage of randomly sorted images.

The problem I ran into was the different aspect ratios.

I don’t know if a collage is possible using a pure css solution, but if you have any suggestions I welcome them! If you just start float’ing images together you get a lot of ugly whitespace. Obviously if you knew the image dimensions before hand then you could write some css to handle all the images.

The algorithm treats the entire canvas like a matrix of rows and columns and fill up the first column. When I reach the bottom row of the canvas I start the next column. If I remember the positioning of the last column of images I know approximately where to put my next column of images. If you want to see the source code just start with this page.

I didn’t spend a lot of time documenting this plugin because I just wanted something quick and dirty to display random images on my site in a sort of ‘collage-like’ manner. Unfortunately, sometimes it still shows some white space between the images as the algorithm isn’t perfect.. I blame jQuery (not really, it’s my fault entirely). Here is a code snippet on how I get this thing to running.

1
2
3
4
5
6
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#refresh-canvas').click(function() { jQuery('.canvas').collage(); });
jQuery('.canvas').collage({ numberOfImages: jQuery('.canvas').find("img").length });
});
</script>

Of course, you will need to include these javascript files as well in order for the code snippet above to work.

UPDATE I made a github repo for this code since that’s the mature thing to do.

Enjoy!