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=""></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 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>

Example 2 - images hosted on flickr

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

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

          <div id="nanogallery2" data-nanogallery2 = '{
                  "thumbnailHeight":  150,
                  "thumbnailWidth":   150,
                  "itemsBaseURL":     ""
                }' >
            <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>
Options must respect the JSON format (and not the javascript object syntax).
Property names and string values must be between double-quotes ".

- with javascript

          <div id="nanogallery2">gallery_made_with_nanogallery2</div>
           jQuery(document).ready(function () {
                thumbnailHeight:  150,
                thumbnailWidth:   150,
                itemsBaseURL:     '',
                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' }