nanogallery2 nanogallery2


Everything you need to add beautiful, modern and high quality photo galleries to your website.




gallery_made_with_nanogallery2



















nanogallery2 is a javascript library for displaying photo galleries.









Beautiful Photo Gallery

Style the layout to suit your personal needs, and add eye-catching effects.

Great Photo & Video Viewer

Lightbox for highlighting your photos and videos, and for handy navigation.

Visual Builder

For generating your galleries without coding. You can also use HTML markup or javascript.





For Developers

If you are a developer, you may use nanogallery2 with javascript.

For Designers

If you are a designer, you'll love to use nanogallery2 just with HTML markup.

For Everyone

nanogallery2 is designed for everyone as the easiest and fastest way to create engaging photo galleries.







ONE JAVASCRIPT LIBRARY   =   UNLIMITED GALLERIES     BE CREATIVE  










Get nanogallery2

Latest release of the library:
v2.0.0 -

  Download v2.0.0

User reviews



  Read more  

Academy

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

  Visit  






Let's be friends

and get information on new releases!

       

Showcase

Get inspired by looking at some examples that demonstrate the performance of the libray.

  View demos  

Need help?

Share your technical questions with the community.

    Github  











LAYOUTS






nanogallery2 - grid gallery
Grid Gallery
nanogallery2 - justified gallery
Justified Gallery
nanogallery2 - cascading gallery
Cascading Gallery
nanogallery2 - mosaic gallery
Mosaic Gallery






FEATURES






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/






Select your prefered usage:

HTML markup     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>