snapGallery.js

Create responsive galleries with minimal effort

snapGallery is a super-simple jQuery plugin that converts your unordered, haphazard, differently sized images into a beautiful gallery.

Completely responsive and customizable, snapGallery allows you to select the spacing between images, the minimum width allowed before stacking and the maximum number of columns, with more options on the way!

View the plugin homepage with a live demonstration!

Download

Recommended: Download the script from here

Not recommended: link to the script

<script src="http://neerajdelima.ga/snapGallery/snapGallery.js"></script>

Usage

Add the following 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>

Make sure to include both jQuery as well as the snapGallery script:

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

Call the plugin & watch the magic happen!

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

You can also provide parameters to customize the layout to your needs:

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

Demo

snapGallery takes an unordered list of images like this:

and converts them into a gallery like this: