nanogallery2





javascript library


v2.4.2 -

release notes      download




a modern photo / video gallery and lightbox















The tool of choice for beautiful galleries with stunning effects







Take full control over gallery layouts and animations


MOSAIC example 1
MOSAIC example 2
GRID example 1
GRID example 2
JUSTIFIED example
CASCADING example
gallery_made_with_nanogallery2











Lightbox

Medias are displayed in a fast and smooth lightbox. Fully customisable, it offers an exhaustive range of possibilities, from toolbars to transitions between two images.


Builder

Visual designer for generating your galleries without coding. Set the properties and see directly the preview on screen.
The Builder is the perfect tool for starting to learn how to use nanogallery2.












Everything you would expect






Touch and hover effects
Display animations
Photos
Videos
Lightbox
Responsive
Albums
Blurred preview
filter by keywords
Javascript API
Gesture
Deep Linking
Gallery pagination
Social sharing
Navigation bar
Lazy loading
Checkboxes
Highly customizable
Custom tools
Retina / Hi-DPI
Browser history
Pinch zoom
Modular
Markup config
Themes
Slideshow
Shopping cart
Custom Icons








and it doesn’t end there…



 

PHP add-on for automatic generation of responsive thumbnails: nanoPhotosProvider2
Tons of new possibilities since the popular nanoGALLERY
Also available without any installation: nanogallery2 portable
Optional modules to display content from Flickr or Google Photos
Open source - fork on Github to help improving your favorite gallery


 





Get started

Use one of these HTML templates for quickly building a photo gallery from scratch.





To get the script:

      - download it from Github
      - or use npmjs: npm install nanogallery2
      - or use the CDN version: https://unpkg.com/nanogallery2/dist/







I'm a designer, I want to use HTML markup
I'm a developer, I want to code javascript





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://unpkg.com/[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://unpkg.com/[email protected]/dist/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 = "berlin3_t.jpg" > Berlin 3 </a>
              </div>
              <!-- ### end of the gallery definition ### -->
            
          </body>
      </html>
          

    <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://unpkg.com/[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://unpkg.com/[email protected]/dist/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>
          
















nanogallery2





User reviews



  Read more  

Academy

Full featured documentation with examples and ready to use HTML templates.

  Visit  

Need help?

Share your technical questions with the community.

    Github  

Let's be friends

and get information on new releases!