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