Style the layout to suit your personal needs, and add eye-catching effects.
Lightbox for highlighting your photos and videos, and for handy navigation.
For generating your galleries without coding. You can also use HTML markup or javascript.
If you are a developer, you may use nanogallery2 with javascript.
If you are a designer, you'll love to use nanogallery2 just with HTML markup.
nanogallery2 is designed for everyone as the easiest and fastest way to create engaging photo galleries.
Latest release of the library:
v2.1.0 - March 5 2018
Download v2.1.0
Full featured documentation with examples and ready to use HTML templates.
Visit
Get inspired by looking at some examples that demonstrate the performance of the libray.
View demos
Share your technical questions with the community.
Github
Use one of these HTML templates for quickly building a photo gallery from scratch.
To get the script:
- download it from Github
- or use npmjs: npm install nanogallery2
- or use the CDN version: https://unpkg.com/nanogallery2/dist/
Select your prefered usage:
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://unpkg.com/[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/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": "http://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>
<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://unpkg.com/[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/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: 'http://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>