nanogallery2 - quick start


Learn the basics to build quickly a gallery from scratch. Just follow these simple steps.

1. Get the script

- download it from Github
- or use npmjs: npm install nanogallery2

2. Include the files in the <head> of your page

Please note that jQuery is required to run the script. It must be loaded before nanogallery2.
        <!-- jQuery -->
        <script type="text/javascript" src=""></script>
        <!-- nanogallery2 -->
        <link href="css/nanogallery2.min.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="jquery.nanogallery2.min.js"></script>

3. To create the gallery, add the markup in the <body> of your page

Example 1 - self hosted images

          <div data-nanogallery2>
            <a href="..../img1.jpg" data-ngThumb="..../thumbnail1.jpg"></a>
            <a href="..../img2.jpg" data-ngThumb="..../thumbnail2.jpg"></a>
            <a href="..../img3.jpg" data-ngThumb="..../thumbnail3.jpg"></a>

Example 2 - images hosted on flickr

          <div id="my_nanogallery2" data-nanogallery2='{ "userID": "[email protected]", "kind": "flickr" }' ></div>

nanogallery2 - initialization and customization

Galleries can be initialized and configured in 2 ways:

- with HTML

No javascript required. Options are configured with the data-nanogallery2 attribute

          <div id="my_nanogallery2" data-nanogallery2='{ "userID": "[email protected]", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }' ></div>
Options must respect the JSON format (and not the javascript object syntax). Property names and string values must be between double-quotes ".

- with javascript

           jQuery(document).ready(function () {

                userID: [email protected]',
                kind: 'flickr',
                thumbnailHeight: 150,
                thumbnailWidth: 150

          <div id="my_nanogallery2">gallery_made_with_nanogallery2</div>