nanogallery2



nanogallery2 - quick start






Follow these simple steps to learn the basics for quickly building a photo gallery from scratch.




1 Get the script




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 id="nanogallery2" data-nanogallery2>
            <a  href="..../img1.jpg" data-ngThumb="..../thumbnail1.jpg"> Title photo 1 </a>
            <a href="..../img2.jpg" data-ngThumb="..../thumbnail2.jpg"> Title photo 2 </a>
            <a href="..../img3.jpg" data-ngThumb="..../thumbnail3.jpg"> Title photo 3 </a>
          </div>
        </body>

Example 2 - images hosted on flickr


        <body>
          <div id="nanogallery2" data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr" }' ></div>
        </body>












nanogallery2 - initialization and customization




Galleries can be initialized and configured in 2 ways: with HTML markup or with Javascript.



- with HTML markup

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


        <body>
          <div id="nanogallery2" data-nanogallery2 = '{
                  "thumbnailHeight":  150,
                  "thumbnailWidth":   150,
                  "itemsBaseURL":     "http://nanogallery2.nanostudio.org/samples/"
                }' >
            <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>
        </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


        <body>
          <div id="nanogallery2">gallery_made_with_nanogallery2</div>
          
          <script>
           jQuery(document).ready(function () {
              jQuery("#nanogallery2").nanogallery2({
                thumbnailHeight:  150,
                thumbnailWidth:   150,
                itemsBaseURL:     'http://nanogallery2.nanostudio.org/samples/',
                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>