nanogallery2

    3.0.5 • Public • Published

    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

    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:

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

    Install

    npm i nanogallery2

    DownloadsWeekly Downloads

    4,691

    Version

    3.0.5

    License

    GPL-3.0

    Unpacked Size

    2.13 MB

    Total Files

    38

    Last publish

    Collaborators

    • kris_b