nanogallery2 Documentation

nanogallery2 is a modern photo and video gallery and lightbox library. Key capabilities include:

Gallery Features

• Layouts: Multiple responsive base layouts including grid, cascading/mansonry, justified, and mosaic.
• Filtering: Tag and keyword filtering.
• Interactions: Animated on-scroll item reveals, hover/touch effects, and pagination (including a "display more" button).
• Organization: Support for multi-level albums and breadcrumb navigation.
• Tools: Thumbnails can include social sharing, selection, download, and shopping cart tools.

Lightbox Features

• Gestures: Swipe and pinch-to-zoom support.
• Controls: Mouse and keyboard navigation, image rotation, and zoom.
• Customization: Fully customizable toolbars and themes.
• Transitions: Smooth previous/next media transitions and smart slideshow mode.

Media Support

• Types: Supports images and videos (YouTube, Vimeo, Dailymotion).
• Metadata: Supports media titles, descriptions, and tags.

You can initialize a gallery by adding the data-nanogallery2 attribute to a div element. There are three primary ways to provide content:

1. External Provider (e.g., Flickr): Pass a JSON configuration string to data-nanogallery2 specifying the provider and credentials.
2. Simple Links: Place <a> tags inside the container. The href of the link is the full-size image, and an nested <img> serves as the thumbnail.
3. Advanced Metadata: Use <a> tags with data- attributes to provide custom thumbnails (data-ngthumb) and descriptions (data-ngdesc). You can also set a base URL for all items using itemsBaseURL in the configuration.

<!-- Example 1: Flickr Provider -->
<div id="my_nanogallery2" 
  data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>
</div>

<!-- Example 2: Simple HTML Links -->
<div id="my_nanogallery2" data-nanogallery2>
  <a href="img/img_01.jpg">Title Image 1
    <img src="img/img_01_thumbnail.jpg"/>
  </a>
  <a href="img/img_02.jpg">Title Image 2
    <img src="img/img_02_thumbnail.jpg"/>
  </a>
</div>

<!-- Example 3: Advanced Metadata with Base URL -->
<div id="my_nanogallery2" data-nanogallery2='{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
  <a href="img_01.jpg" data-ngthumb="img_01t.jpg" data-ngdesc="Description1">Title Image1</a>
  <a href="img_02.jpg" data-ngthumb="img_02ts.jpg" data-ngdesc="Image 2 description">Title Image2</a>
</div>