snapGallery.js

SnapGallery is a simple jQuery plugin that turns an ugly list of differently sized images into a beautiful, customizable gallery at the snap of your fingers! Simply dump the images onto the page, write one line of javascript and bam! You have yourself a gallery. Check out the magic below!

snapGallery

Usage

1. Add the barebones HTML markup

<ul id="gallery-container">
    <li><img src="./path/to/img1.jpg" /></li>
    <li><img src="./path/to/img2.jpg" /></li>
    <li><img src="./path/to/img3.jpg" /></li>
    <!-- -->
    <!-- -->
    <li><img src="./path/to/img21.jpg" /></li>
    <li><img src="./path/to/img22.jpg" /></li>
</ul>

2. Include jQuery and the snapGallery script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./snapGallery.js"></script>

3. Call the plugin, sit back, and watch the magic happen!

$(function() {
	$(window).load(function() {
		$('#gallery-container').snapGallery();
	});
})

You can also provide custom parameters to fit your needs:

$(function() {
	$(window).load(function() {
		$('#gallery-container').snapGallery({
			minWidth: 100,
			maxCols: 4,
			margin: 10
		});
	});
})