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
Optional add-on for automatic publishing of self hosted images: nanoPhotosProvider2
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>
npmjs: npm install nanogallery2
Dual licensed:
- GPLv3 for personal or open source projects with GPLv3 license
- Commercial license for use in a revenue-generating product
- 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!
