nanogallery2





nanogallery2



javascript library


v2.3.0 -

release notes      download




a modern photo / video gallery and lightbox









Layouts


MOSAIC GALLERY
GRID GALLERY
JUSTIFIED GALLERY
CASCADING GALLERY
gallery_made_with_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!

       







Everything you would expect






UI interactions
Special effects
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 also:

 

nanoPhotosProvider2 add-on for automatic generation of responsive thumbnails
Build a gallery in minutes with the Visual Builder
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":     "http://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>
          

    <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:     'http://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>