nanogallery2






nanogallery2 academy

Get the most out of nanogallery2.












User guide
 

Learn how to build, configure and customize your gallery and lightbox.

  Read  

Content source
 

See how to define the content (photos / videos) of your gallery and lightbox.

  Read  

API
 

Extend and manage nanogallery2 with javascript.

  Read  


 
 
 
 






Quick start

- Get the script:
      - download it from Github
      - or use npmjs: npm install nanogallery2
      - or choose a CDN version: CDNJS JSDELIVER UNPKG


- jQuery:
The jQuery library needs to be included before nanogallery2.min.js file.
Include jQuery only once per page.
Compatibility issue: do not use jQuery v3.0/v3.1 because of a jQuery regression (described here).


- Markup method - use this full working HTML template :
No javascript required. Options are configured with the data-nanogallery2 attribute.


    <html>
        <head>
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">          
            
            <!-- jQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
          
            <!-- nanogallery2 -->
            <link  href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/jquery.nanogallery2.min.js"></script>
        </head>
        <body>
        
              <h1>gallery made with nanogallery2</h1>

              <!-- ### start of the gallery definition ### -->
              <div id="nanogallery2"
              
                  <!-- gallery settings -->
                  data-nanogallery2 = '{
                        "thumbnailHeight":  150,
                        "thumbnailWidth":   150,
                        "itemsBaseURL":     "https://nanogallery2.nanostudio.org/samples/"
                      }' >
                      
                  <!-- gallery content -->
                  <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>
              <!-- ### end of the gallery definition ### -->
            
          </body>
      </html>
          


- Javascript method - use this full working HTML template :


    <html>
        <head>
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">          
            
            <!-- jQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
          
            <!-- nanogallery2 -->
            <link  href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/2.4.2/jquery.nanogallery2.min.js"></script>
        </head>
        <body>
        
              <h1>gallery made with nanogallery2</h1>

              <!-- ### position of the gallery ### -->
              <div id="nanogallery2">gallery_made_with_nanogallery2</div>
            
              <script>
                 jQuery(document).ready(function () {

                    jQuery("#nanogallery2").nanogallery2( {
                        // ### gallery settings ### 
                        thumbnailHeight:  150,
                        thumbnailWidth:   150,
                        itemsBaseURL:     'https://nanogallery2.nanostudio.org/samples/',
                        
                        // ### gallery content ### 
                        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>
      </html>
          






Live examples on Codepen