nanogallery2

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

nanostudio-org/nanogallery2 nanogallery2.nanostudio.org nanogallery2

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

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