nanogallery2

modern photo / video gallery and lightbox [javascript library]

nanogallery2 is a must have gallery and lightbox. Strengths of nanogallery2 include rich UI interactions, multiple responsive layouts, swipe and zoom gestures, multi-level albums, an HTML page generator and limitless options. Setup and use are simple. The documentation includes tutorials, samples and ready to use HTML pages.

Documentation, Demonstrations and Tutorials

-> Check the homepage of the project

Features

Markup or Javascript set up

Images

Videos (Youtube, Vimeo, Dailymotion)

Media titles and descriptions, tags

Touch and mobile friendly

Smart lazy loading and displaying

Deeplinking

Gallery

multiple base layouts: grid, cascading/mansonry, justified, mosaic
responsive
tag/keyword filtering
display transition on gallery and thumbnails: reveal items on-scroll in an animated way
hover/touch effects
tools on thumbnails: social sharing, selection, download, shopping cart
pagination, "display more" button
albums
blurred images for thumbnail preview
breadcrumb navigation
slider on last thumbnail
thumbnails stacks
themes

Lightbox

swipe / pinch to zoom
mouse and keyboard
image rotation / zoom
fully customizable toolbars
previous/next media transitions
smart slideshow
themes

Custom icons

show media location on google maps

API / Events / Callbacks

Fast animation engine

Builder for quick online testing

Detailled documentation with samples

Super customizable

Optional add-on for automatic publishing of self hosted images: nanoPhotosProvider2

New features and improvements

-> Check ChangeLog

Some screenshots

Usage

HTML markup setup examples:

<body>
  <div id="my_nanogallery2" 
    data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>
  </div>
</body>

  <div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
    <a href="img_01.jpg" data-ngthumb="img_01t.jpg"  data-ngdesc="Description1"        >Title Image1</a>
    <a href="img_02.jpg" data-ngthumb="img_02ts.jpg" data-ngdesc="Image 2 description" >Title Image2</a>
    <a href="img_03.jpg" data-ngthumb="img_03t.jpg"                                    >Title Image3</a>
  </div>

  <div id="my_nanogallery2" data-nanogallery2  >
    <a href="img/img_01.jpg">Title Image 1
      <img src="img/img_01_thumbnail.jpg"/>
    </a>
    <a href="img/img_02.jpg">Title Image 2
      <img src="img/img_02_thumbnail.jpg"/>
    </a>
    <a href="img/img_03.jpg">Title Image 3
      <img src="img/img_03_thumbnail.jpg"/>
    </a>
  </div>

Package managers

npmjs: npm install nanogallery2

License

Dual licensed:

GPLv3 for personal or open source projects with GPLv3 license
Commercial license for use in a revenue-generating product

Requirements

Javascript must be enabled
jQuery 1.12.4+ (not compatible with v3.0/v3.1, because of a jQuery regression described here )

Many thanks to these technology contributors:

for shifty: Jeremy Kahn - special thanks for all your help!
for imagesloaded: David DeSandro
for screenfull.js: Sindre Sorhus
for Hammer.js: Alexander Schmitz, Chris Thoburn, Jorik Tangelder
for fontello.com: Vitaly Puzrin

Many thanks to BrowserStack for their great testing services!

alicroche/nanogallery2