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>