Get a gallery up and running in minutes with this VISUAL BUILDER.
Just set the properties and see the result in a live preview of the gallery. A full working HTML page is generated at the bottom of the builder.
The builder is a good starting point to discover nanogallery2. Only a small subset of all features of nanogallery2 is available here. To go further, you can enhance the generated templates with properties from the documentation.
you shoud adapt the pathes to point to your web server.
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>
</head>
<body>
<h1>Gallery made with nanogallery2</h1>
<div ID="ngy2p" data-nanogallery2='{
"itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
"thumbnailWidth": "200",
"thumbnailLabel": {
"position": "overImageOnBottom"
},
"thumbnailAlignment": "center",
"thumbnailOpenImage": true
}'>
<a href="berlin1.jpg" data-ngthumb="berlin1t.jpg" data-ngdesc="">Berlin 1</a>
<a href="berlin2.jpg" data-ngthumb="berlin2t.jpg" data-ngdesc="">Berlin 2</a>
<a href="berlin3.jpg" data-ngthumb="berlin3t.jpg" data-ngdesc="">Berlin 3</a>
</div>
</body>
</html>