Full featured documentation with examples and ready to use HTML templates.
Visit
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:
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": "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>