Skip to content
image gallery simplified - jQuery plugin. Touch enabled, responsive, justified/cascading/grid layout and it supports pulling in Flickr, Google Photos and self hosted images.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
demonstration cleanup v5.0.3 Aug 31, 2014
dist v5.10.3 Jun 30, 2016
doc v4.4.2 Jun 4, 2014 v5.1.0 Sep 16, 2014
.gitattributes ... Apr 3, 2014
.gitignore v5.7.0 Jun 1, 2015
Gruntfile.js v5.4.0 Feb 2, 2015 Create Jun 9, 2017
bower.json v5.10.3 Jun 30, 2016
jquery.nanogallery.js v5.10.3 Jun 30, 2016
jquery.nanogallerydemo.js v5.5.4 Mar 23, 2015
nanogallery.jquery.json v5.10.3 Jun 30, 2016
package.json v5.10.3 Jun 30, 2016
performances.html v5.5.2 Mar 19, 2015

nanoGALLERY - image gallery for jQuery

nanoGALLERY's successor, is available: nanogallery2


Please note that nanoGALLERY will continue to be maintained for fixing show-stopper bugs, but no new features should be expected.

Image gallery simplified.

Touch enabled, fully responsive, justified/cascading/grid layout and supporting cloud storage.

Featuring multi-level navigation in albums, combinable hover effects on thumbnails, responsive thumbnail sizes, multiple layouts, slideshow, fullscreen, pagination, image lazy load, themes, deep linking, customizable, i18n, and pulling in Flickr or Picasa/Google+/Google Photos photo albums among others.

Usage can be as easy as:

		kind : 'picasa',
		userID : 'YourUserID'

View ChangeLog

Documentation, Demonstrations and Tutorials

Visit the nanoGALLERY homepage:

Screenshot1 Screenshot2 Screenshot3

Package managers

Bower: bower install nanogallery
npm: npm install nanogallery

Usage example with images from a Flickr account

Include JS and CSS files

<!-- Add jQuery library (MANDATORY) -->
<script type="text/javascript" src=""></script> 

<!-- Add nanoGALLERY plugin files (MANDATORY) -->
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.js"></script>

Create a container

Put a <DIV> element in the <BODY> of your HTML. This DIV is the placeholder for the gallery.

<div id="nanoGallery1"></div>

Initialize the script

jQuery(document).ready(function () {


nanoGALLERY is licensed under CC BY-NC 3.0.
Only for personal, non-profit organizations, or open source projects (without any kind of fee), you may use nanoGALLERY for free.


  • Javascript must be enabled
  • jQuery 1.7.1


Testing services provided by BrowserStack

You can’t perform that action at this time.