Medias are displayed in a fast and smooth lightbox. Fully customisable, it offers an exhaustive range of possibilities, from toolbars to transitions between two images.
Visual designer for generating your galleries without coding. Set the properties and see directly the preview on screen.
Even if all nanogallery2's features are not available, the Builder is the perfect tool for starting to learn how to use nanogaller2.
Use one of these HTML templates for quickly building a photo gallery from scratch.
To get the script:
npm install nanogallery2
https://unpkg.com/nanogallery2/dist/
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": "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>
<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: '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>