NanoGALLERY
image gallery simplified - jQuery plugin. Touch enabled, responsive, justified/cascading/grid layout and it supports pulling in Flickr, Google Photos and self hosted images.
Install / Use
/learn @Kris-B/NanoGALLERYREADME
nanoGALLERY - image gallery for jQuery
<br /> <br /> <br /> <br /><b>nanoGALLERY</b>'s successor, is available: <b>nanogallery2</b>
<img src="http://nanogallery2.nanostudio.org/img/nanogallery2_logo.png" alt="nanogallery2"/>Please note that <b>nanoGALLERY</b> is no more maintained. Please switch to nanogallery2.
<br /> <br /> <br /> <br />
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:
jQuery('#elt').nanoGallery({
kind : 'picasa',
userID : 'YourUserID'
});
Documentation, Demonstrations and Tutorials
Visit the nanoGALLERY homepage: http://nanogallery.brisbois.fr
<img src="/doc/nanogallery_screenshot.png?raw=true" alt="Screenshot1" style="max-width:400px;"/>
<img src="/doc/nanoGALLERY4_screenshot7.png?raw=true" alt="Screenshot2" style="max-width:400px;"/>
<img src="/doc/nanoGALLERY4_screenshot1a.png?raw=true" alt="Screenshot3" style="max-width:400px;"/>
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="third.party/jquery-1.7.1.min.js"></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 () {
jQuery("#nanoGallery1").nanoGallery({
kind:'flickr',
userID:'34858669@N00'
});
});
License
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.
Requirements
- Javascript must be enabled
- jQuery 1.7.1
Thanks
Testing services provided by BrowserStack
<img src="http://nanogallery.brisbois.fr/img/browserstack2.png"/>