A simple jQuery plugin that allows you to create good looking image galleries with zero effort.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
README.md
felt.png
index.html
main.css
snapGallery.js
snapGalleryAfter.png
snapGalleryBefore.png

README.md

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:

Snap Gallery Before image

and converts them into a gallery like this:

Snap Gallery After image