nanogallery2

a modern photo / video gallery and lightbox [JS library]

Showing:

Popularity

Downloads/wk

4.3K

GitHub Stars

545

Maintenance

Last Commit

8mos ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

93.4KB

License

GPL-3.0

Type Definitions

Tree-Shakeable

No?

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.

nanogallery2

version Build Status DeepScan grade



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

  • 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

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:

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

 

Many thanks to BrowserStack for their great testing services!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate