nanogallery2



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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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

        <body>
          <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>
            ...
          </div>
        </body>
      

Example 2 - images hosted on flickr

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





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

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

- with javascript

        <head>
          .....
          
          <script>
           jQuery(document).ready(function () {

              jQuery("#my_nanogallery2").nanogallery2({
                userID: [email protected]',
                kind: 'flickr',
                thumbnailHeight: 150,
                thumbnailWidth: 150
              });

            });
          </script>
        </head>
        <body>
          <div id="my_nanogallery2">gallery_made_with_nanogallery2</div>
        </body>