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.

-> Check the homepage of the project

• 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

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

-> Check ChangeLog

HTML markup setup examples:

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

  <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>

npmjs: npm install nanogallery2

• 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!