UNPKG

6.35 kBMarkdownView Raw
1
2# nanogallery2
3**modern photo / video gallery and lightbox   [javascript library]**
4
5nanogallery2 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.
6
7<img src="http://nanogallery2.nanostudio.org/img/nanogallery2si.png" alt="nanogallery2"/>
8
9
10![version](https://img.shields.io/badge/version-3.0.1-orange)
11[![Build Status](https://travis-ci.org/nanostudio-org/nanogallery2.svg?branch=dev-gh-pages)](https://travis-ci.org/nanostudio-org/nanogallery2)
12[![DeepScan grade](https://deepscan.io/api/teams/89/projects/394/branches/608/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=89&pid=394&bid=608)
13<!--
14![license](https://img.shields.io/static/v1?label=Open%20source%20license&message=GPLv3&color=green)
15![license](https://img.shields.io/static/v1?label=Commercial%20license&message=for%20use%20in%20a%20revenue-generating%20product&color=green)
16-->
17[![Twitter](https://img.shields.io/twitter/url/https/github.com/nanostudio-org/nanogallery2.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)
18
19
20## Documentation, Demonstrations and Tutorials
21-> [Check the homepage of the project](http://nanogallery2.nanostudio.org/academy.html)
22
23<!--
24[![nanogallery2 youtube demo](https://github.com/nanostudio-org/nanogallery2/raw/gh-pages/videos/youtube_nanogallery2.png)](https://www.youtube.com/watch?v=Ir098VWCv8Q)
25-->
26
27
28<br />
29
30## Features
31### Markup or Javascript set up
32### Images
33### Videos (Youtube, Vimeo, Dailymotion)
34### Media titles and descriptions, tags
35### Touch and mobile friendly
36### Smart lazy loading and displaying
37### Deeplinking
38### Gallery
39- multiple base layouts: grid, cascading/mansonry, justified, mosaic
40- responsive
41- tag/keyword filtering
42- display transition on gallery and thumbnails: reveal items on-scroll in an animated way
43- hover/touch effects
44- tools on thumbnails: social sharing, selection, download, shopping cart
45- pagination, "display more" button
46- albums
47- blurred images for thumbnail preview
48- breadcrumb navigation
49- slider on last thumbnail
50- thumbnails stacks
51- themes
52### Lightbox
53- swipe / pinch to zoom
54- mouse and keyboard
55- image rotation / zoom
56- fully customizable toolbars
57- previous/next media transitions
58- smart slideshow
59- themes
60### Custom icons
61### show media location on google maps
62### API / Events / Callbacks
63### Fast animation engine
64### Builder for quick online testing
65### Detailled documentation with samples
66### Super customizable
67### Optional add-on for automatic publishing of self hosted images: [nanoPhotosProvider2](https://github.com/nanostudio-org/nano_photos_provider2)
68
69<br />
70
71## Some screenshots
72<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_cascading.jpg?raw=true" width="500px">
73<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_justified.jpg?raw=true" width="500px">
74<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_grid1.jpg?raw=true" width="500px">
75<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_grid2.jpg?raw=true" width="500px">
76<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_mosaic1.jpg?raw=true" width="500px">
77<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_mosaic2.jpg?raw=true" width="500px">
78<img src="https://github.com/nanostudio-org/nanogallery2/raw/master/screenshots/ngy2_tags.jpg?raw=true" width="500px">
79
80
81<br />
82
83## Usage
84
85HTML markup setup examples:
86```
87<body>
88 <div id="my_nanogallery2"
89 data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>
90 </div>
91</body>
92```
93```
94 <div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
95 <a href="img_01.jpg" data-ngthumb="img_01t.jpg" data-ngdesc="Description1" >Title Image1</a>
96 <a href="img_02.jpg" data-ngthumb="img_02ts.jpg" data-ngdesc="Image 2 description" >Title Image2</a>
97 <a href="img_03.jpg" data-ngthumb="img_03t.jpg" >Title Image3</a>
98 </div>
99```
100```
101 <div id="my_nanogallery2" data-nanogallery2 >
102 <a href="img/img_01.jpg">Title Image 2
103 <img src="img/img_01_thumbnail.jpg"/>
104 </a>
105 <a href="img/img_02.jpg">Title Image 2
106 <img src="img/img_02_thumbnail.jpg"/>
107 </a>
108 <a href="img/img_03.jpg">Title Image 3
109 <img src="img/img_03_thumbnail.jpg"/>
110 </a>
111 </div>
112```
113
114<br />
115
116## Package managers
117
118[npmjs](https://www.npmjs.com/package/nanogallery2): `npm install nanogallery2`
119
120<br />
121
122## License
123Dual licensed:
124- GPLv3 for personal or open source projects with GPLv3 license
125- Commercial license for use in a revenue-generating product
126
127<br />
128
129## Requirements
130* Javascript must be enabled
131* jQuery 1.12.4+ (not compatible with v3.0/v3.1, because of a jQuery regression described [here](https://github.com/jquery/jquery/issues/3193) )
132
133<br />
134
135
136**Many thanks to these technology contributors:**
137- for [shifty](https://github.com/jeremyckahn/shifty):
138**[Jeremy Kahn](https://github.com/jeremyckahn) - special thanks for all your help!**
139- for [imagesloaded](https://github.com/desandro/imagesloaded):
140[David DeSandro](https://github.com/desandro)
141- for [screenfull.js](https://github.com/sindresorhus/screenfull.js):
142[Sindre Sorhus](https://github.com/sindresorhus)
143- for [Hammer.js](http://hammerjs.github.io/):
144[Alexander Schmitz](https://github.com/arschmitz),
145[Chris Thoburn](https://github.com/runspired),
146[Jorik Tangelder](https://github.com/jtangelder)
147- for [fontello.com](http://fontello.com):
148[Vitaly Puzrin](https://github.com/puzrin)
149
150&nbsp;
151&nbsp;
152**Many thanks to [BrowserStack](https://www.browserstack.com/) for their great testing services!**
153<img src="http://nanogallery.brisbois.fr/img/browserstack2.png" width="230px"/>