nanogallery2
v3.0.5
Published
modern photo / video gallery and lightbox
Downloads
24,290
Maintainers
Readme
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
Some screenshots
Usage
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>
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!