Get the most out of nanogallery2.
Learn how to build, configure and customize your gallery and lightbox.
Read
See how to define the content (photos / videos) of your gallery and lightbox.
Read
Extend and manage nanogallery2 with javascript.
Read
- Get the script:
- download it from Github
- or use npmjs: npm install nanogallery2
- or choose a CDN version:
CDNJS
JSDELIVER
UNPKG
- jQuery:
The jQuery library needs to be included before nanogallery2.min.js file.
Include jQuery only once per page.
Compatibility issue: do not use jQuery v3.0/v3.1 because of a jQuery regression (described here).
- Markup method - use this full working HTML template :
No javascript required. Options are configured with the data-nanogallery2 attribute.
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!-- nanogallery2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/jquery.nanogallery2.min.js"></script>
</head>
<body>
<h1>gallery made with nanogallery2</h1>
<!-- ### start of the gallery definition ### -->
<div id="nanogallery2"
<!-- gallery settings -->
data-nanogallery2 = '{
"thumbnailHeight": 150,
"thumbnailWidth": 150,
"itemsBaseURL": "https://nanogallery2.nanostudio.org/samples/"
}' >
<!-- gallery content -->
<a href = "berlin1.jpg" data-ngThumb = "berlin1_t.jpg" > Berlin 1 </a>
<a href = "berlin2.jpg" data-ngThumb = "berlin2_t.jpg" > Berlin 2 </a>
<a href = "berlin3.jpg" data-ngThumb = "berlin2_t.jpg" > Berlin 3 </a>
</div>
<!-- ### end of the gallery definition ### -->
</body>
</html>
- Javascript method - use this full working HTML template :
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!-- nanogallery2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/jquery.nanogallery2.min.js"></script>
</head>
<body>
<h1>gallery made with nanogallery2</h1>
<!-- ### position of the gallery ### -->
<div id="nanogallery2">gallery_made_with_nanogallery2</div>
<script>
jQuery(document).ready(function () {
jQuery("#nanogallery2").nanogallery2( {
// ### gallery settings ###
thumbnailHeight: 150,
thumbnailWidth: 150,
itemsBaseURL: 'https://nanogallery2.nanostudio.org/samples/',
// ### gallery content ###
items: [
{ src: 'berlin1.jpg', srct: 'berlin1_t.jpg', title: 'Berlin 1' },
{ src: 'berlin2.jpg', srct: 'berlin2_t.jpg', title: 'Berlin 2' },
{ src: 'berlin3.jpg', srct: 'berlin3_t.jpg', title: 'Berlin 3' }
]
});
});
</script>
</body>
</html>
- Image gallery
- Image gallery with albums
- Gallery with videos
- Custom lightbox toolbars
- Image gallery
- Image gallery with albums
- Gallery with videos
- First album level specific options
- Thumbnail hover/touch effects
- Custom thumbnail toolbar
- Custom lightbox toolbars
- API - Search in gallery
- API - Add / delete items dynamically
- API - Replace default lightbox with FancyBox3
- API - Retrieve user selected images
- API - Shopping cart