### Configure nanogallery2 via HTML Data Attributes

Source: https://github.com/nanostudio-org/nanogallery2/blob/master/README.md

Examples of initializing nanogallery2 using the data-nanogallery2 attribute with different configuration strategies.

```html
  <div id="my_nanogallery2" 
    data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>
  </div>
```

```html
  <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>
    <a href="img/img_03.jpg">Title Image 3
      <img src="img/img_03_thumbnail.jpg"/>
    </a>
  </div>
```

```html
  <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>
    <a href="img_03.jpg" data-ngthumb="img_03t.jpg"                                    >Title Image3</a>
  </div>
```

--------------------------------

### Install nanogallery2 via npm

Source: https://github.com/nanostudio-org/nanogallery2/blob/master/README.md

Command to install the package using the npm package manager.

```bash
npm install nanogallery2
```

--------------------------------

### Get and Set Gallery Options at Runtime

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Dynamically retrieve and modify Nanogallery2 configuration options. Use the 'option' method with the option name and optionally a new value.

```javascript
// Get current option value
var thumbnailWidth = $('#my_gallery').nanogallery2('option', 'thumbnailWidth');
console.log('Thumbnail width:', thumbnailWidth);

// Set new option value
$('#my_gallery').nanogallery2('option', 'thumbnailSelectable', true);
$('#my_gallery').nanogallery2('option', 'slideshowDelay', 5000);
```

--------------------------------

### Configure Grid Layout with Responsive Thumbnails

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Set up a grid layout with responsive thumbnail sizing for different screen breakpoints using thumbnailWidth and thumbnailHeight.

```javascript
$"#grid_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: '300 XS100 SM150 ME200 LA250 XL300',
  thumbnailHeight: '200 XS100 SM150 ME200 LA200 XL200',
  thumbnailCrop: true,
  thumbnailAlignment: 'center',
  thumbnailGutterWidth: 10,
  thumbnailGutterHeight: 10,
  galleryDisplayMode: 'fullContent',
  galleryLastRowFull: false
});
```

--------------------------------

### Initialize Basic Gallery with Self-Hosted Images

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Use this snippet to initialize nanogallery2 with self-hosted images defined via HTML markup. Configure thumbnail dimensions, borders, gutters, and label display.

```javascript
$("#my_gallery").nanogallery2({
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailBorderHorizontal: 2,
  thumbnailBorderVertical: 2,
  thumbnailGutterWidth: 10,
  thumbnailGutterHeight: 10,
  thumbnailLabel: {
    position: 'overImage',
    display: true,
    displayDescription: false,
    align: 'center',
    valign: 'bottom'
  },
  thumbnailHoverEffect2: 'toolsAppear',
  viewerToolbar: {
    display: true,
    position: 'bottom',
    standard: 'label'
  }
});
```

--------------------------------

### Initialize Standalone Lightbox

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configures nanogallery2 to function as a standalone lightbox viewer without displaying thumbnails. Requires setting lightboxStandalone to true.

```javascript
// Initialize standalone lightbox
$('#lightbox_only').nanogallery2({
  items: [
    { src: 'photo1.jpg', title: 'Photo 1' },
    { src: 'photo2.jpg', title: 'Photo 2' },
    { src: 'photo3.jpg', title: 'Photo 3' }
  ],
  lightboxStandalone: true,
  openOnStart: 'photo1.jpg',  // Open specific image on initialization
  viewerZoom: true,
  viewerToolbar: {
    display: true,
    standard: 'label,shareButton,downloadButton,fullscreenButton,closeButton'
  }
});

// Open lightbox on custom trigger
$('#open_lightbox_btn').on('click', function() {
  $('#lightbox_only').nanogallery2({ lightboxStandalone: true });
});
```

--------------------------------

### Configure Thumbnail Toolbar Buttons

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Set up toolbar buttons on thumbnails for actions like selection, sharing, and downloading using thumbnailToolbarImage and thumbnailToolbarAlbum configurations.

```javascript
$"#toolbar_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailSelectable: true,
  thumbnailToolbarImage: {
    topLeft: 'select',
    topRight: 'featured',
    bottomLeft: 'share,download',
    bottomRight: 'info,cart'
  },
  thumbnailToolbarAlbum: {
    topLeft: 'select',
    topRight: 'counter'
  }
});
```

--------------------------------

### Enable Slideshow

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configure automatic image cycling with defined delays and autostart behavior.

```javascript
$('#slideshow_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  slideshowDelay: 3000,  // 3 seconds between images
  slideshowAutoStart: true,
  viewerTools: {
    topLeft: 'pageCounter,playPauseButton',
    topRight: 'fullscreenButton,closeButton'
  }
});
```

--------------------------------

### Configure Nanogallery2 Video Support

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Integrate video playback from various sources, including YouTube, Vimeo, Dailymotion, and self-hosted files. Define video items with 'src' and 'srct' properties for the video URL and thumbnail, respectively.

```javascript
$('#video_gallery').nanogallery2({
  items: [
    // YouTube video
    {
      src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      srct: 'youtube_thumb.jpg',
      title: 'YouTube Video'
    },
    // Vimeo video
    {
      src: 'https://vimeo.com/123456789',
      srct: 'vimeo_thumb.jpg',
      title: 'Vimeo Video'
    },
    // Self-hosted video (MP4, WEBM, OGV)
    {
      src: 'videos/myvideo.mp4',
      srct: 'video_thumb.jpg',
      title: 'Self-hosted Video'
    }
  ],
  thumbnailWidth: 300,
  thumbnailHeight: 200
});
```

--------------------------------

### nanoPhotosProvider2 Data Source Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configure nanogallery2 to use the nanoPhotosProvider2 backend for self-hosted images with automatic thumbnail generation. Specify the data provider URL, album, and sorting.

```javascript
$("#npp_gallery").nanogallery2({
  kind: 'nano_photos_provider2',
  dataProvider: 'https://yourserver.com/nano_photos_provider2/nano_photos_provider2.php',
  album: 'vacation_2023',
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailCrop: true,
  gallerySorting: 'TITLEASC'
});
```

--------------------------------

### Configure Multi-Level Albums

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Set up hierarchical galleries with breadcrumb navigation and level-specific thumbnail settings.

```javascript
$('#album_gallery').nanogallery2({
  kind: 'flickr',
  userID: '34858669@N00',
  flickrAPIKey: 'your_api_key',
  displayBreadcrumb: true,
  breadcrumbOnlyCurrentLevel: true,
  breadcrumbAutoHideTopLevel: true,
  breadcrumbHideIcons: false,
  thumbnailLevelUp: true,  // Show "back" navigation thumbnail
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  // Different settings for album level (L1) vs image level (LN)
  thumbnailL1Width: 350,
  thumbnailL1Height: 250,
  galleryL1MaxRows: 2,
  galleryMaxRows: 4
});
```

--------------------------------

### Options Get/Set API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Read and modify gallery options at runtime.

```APIDOC
## Options Get/Set API

### Description
Read and modify gallery options at runtime.

### Methods
- `option(optionName)`: Get the current value of a specific option.
- `option(optionName, value)`: Set a new value for a specific option.

### Example Usage
```javascript
// Get current option value
var thumbnailWidth = $('#my_gallery').nanogallery2('option', 'thumbnailWidth');
console.log('Thumbnail width:', thumbnailWidth);

// Set new option value
$('#my_gallery').nanogallery2('option', 'thumbnailSelectable', true);
$('#my_gallery').nanogallery2('option', 'slideshowDelay', 5000);
```
```

--------------------------------

### Slideshow Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Enable automatic slideshow with configurable delay and autostart options.

```APIDOC
## Slideshow

Enable automatic slideshow with configurable delay and autostart options.

```javascript
$('#slideshow_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  slideshowDelay: 3000,  // 3 seconds between images
  slideshowAutoStart: true,
  viewerTools: {
    topLeft: 'pageCounter,playPauseButton',
    topRight: 'fullscreenButton,closeButton'
  }
});
```
```

--------------------------------

### Configure Cascading (Masonry) Layout

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Implement a masonry-style cascading layout with variable height thumbnails. Set thumbnailHeight to 'auto' and use thumbnailBaseGridHeight for calculations.

```javascript
$"#cascading_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 'auto',
  thumbnailCrop: false,
  thumbnailAlignment: 'center',
  thumbnailBaseGridHeight: 5,
  thumbnailGutterWidth: 10,
  thumbnailGutterHeight: 10
});
```

--------------------------------

### Configure Justified Layout for Pinterest-Style Rows

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Create a justified layout where thumbnails fill each row completely. Set thumbnailWidth to 'auto' and galleryLastRowFull to true.

```javascript
$"#justified_gallery".nanogallery2({
  items: [...],
  thumbnailHeight: 200,
  thumbnailWidth: 'auto',
  thumbnailCrop: false,
  thumbnailAlignment: 'justified',
  galleryLastRowFull: true,
  thumbnailGutterWidth: 5,
  thumbnailGutterHeight: 5
});
```

--------------------------------

### Customize Nanogallery2 Theming and Color Schemes

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Apply built-in themes and define custom color schemes for gallery elements and the viewer. Configure properties like 'theme', 'galleryTheme', 'viewerTheme', 'colorScheme', and 'colorSchemeViewer'.

```javascript
$('#themed_gallery').nanogallery2({
  items: [...],
  theme: 'nGY2',  // Base theme
  galleryTheme: 'dark',  // 'dark', 'light'
  viewerTheme: 'dark',

  // Custom color scheme for gallery
  colorScheme: {
    thumbnail: {
      background: '#111',
      border: '#333',
      labelBackground: 'rgba(0,0,0,0.7)',
      labelColor: '#fff',
      descriptionColor: '#ccc',
      stackBackground: '#555'
    },
    navigationBar: {
      background: '#222',
      color: '#fff'
    },
    pagination: {
      background: '#333',
      color: '#fff',
      backgroundHover: '#555'
    }
  },

  // Custom color scheme for viewer
  colorSchemeViewer: {
    background: '#000',
    imageBorder: '#555',
    toolbarBackground: 'rgba(0,0,0,0.8)',
    toolbarColor: '#fff'
  }
});
```

--------------------------------

### Listen to Nanogallery2 Events

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Attach event listeners to the gallery to react to user interactions and gallery state changes. Use '.on()' with specific Nanogallery2 event names like 'pageChanged.nanogallery2' or 'itemSelected.nanogallery2'.

```javascript
// Initialize gallery
$('#my_gallery').nanogallery2({ items: [...] });

// Listen for page change events
$('#my_gallery').on('pageChanged.nanogallery2', function() {
  console.log('Page changed');
});

// Listen for item selection events
$('#my_gallery').on('itemSelected.nanogallery2', function() {
  var selected = $('#my_gallery').nanogallery2('itemsSelectedGet');
  console.log('Items selected:', selected.length);
});

// Listen for gallery render events
$('#my_gallery').on('galleryRenderStart.nanogallery2', function() {
  console.log('Render started');
});

$('#my_gallery').on('galleryRenderEnd.nanogallery2', function() {
  console.log('Render completed');
});
```

--------------------------------

### Events and Callbacks

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Subscribe to gallery events using callback functions in the configuration.

```APIDOC
## Events and Callbacks

### Description
Subscribe to gallery events using callback functions in the configuration.

### Configuration Options (Callbacks)
- **Gallery Render Callbacks**:
  - `fnGalleryRenderStart`: Called when gallery rendering begins.
  - `fnGalleryRenderEnd`: Called when gallery rendering completes.
  - `fnGalleryObjectModelBuilt`: Called after the gallery object model is built.
  - `fnGalleryLayoutApplied`: Called after the gallery layout is applied.
- **Thumbnail Callbacks**:
  - `fnThumbnailInit($thumbnail, item, galleryIdx)`: Called when a thumbnail is initialized.
  - `fnThumbnailHover($thumbnail, item)`: Called when the mouse hovers over a thumbnail.
  - `fnThumbnailHoverOut($thumbnail, item)`: Called when the mouse leaves a thumbnail.
  - `fnThumbnailClicked($thumbnail, item)`: Called when a thumbnail is clicked. Return `false` to prevent the default action.
  - `fnThumbnailSelection($thumbnail, item, selected)`: Called when a thumbnail's selection state changes.
- **Viewer Callbacks**:
  - `fnImgDisplayed(item)`: Called when an image is displayed in the viewer.
  - `fnThumbnailOpen(item)`: Called when an item is opened (e.g., in the viewer).
- **Data Processing Callback**:
  - `fnProcessData(item, source, sourceData)`: Called to process item data after loading.

### Example Usage
```javascript
$('#event_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  // Gallery render callbacks
  fnGalleryRenderStart: function() {
    console.log('Gallery render started');
  },
  fnGalleryRenderEnd: function() {
    console.log('Gallery render completed');
  },
  fnGalleryObjectModelBuilt: function() {
    console.log('Gallery object model built');
  },
  fnGalleryLayoutApplied: function() {
    console.log('Gallery layout applied');
  },

  // Thumbnail callbacks
  fnThumbnailInit: function($thumbnail, item, galleryIdx) {
    console.log('Thumbnail initialized:', item.title);
  },
  fnThumbnailHover: function($thumbnail, item) {
    console.log('Thumbnail hovered:', item.title);
  },
  fnThumbnailHoverOut: function($thumbnail, item) {
    console.log('Thumbnail hover out:', item.title);
  },
  fnThumbnailClicked: function($thumbnail, item) {
    console.log('Thumbnail clicked:', item.title);
    return true;  // Return false to prevent default action
  },
  fnThumbnailSelection: function($thumbnail, item, selected) {
    console.log('Selection changed:', item.title, selected);
  },

  // Viewer callbacks
  fnImgDisplayed: function(item) {
    console.log('Image displayed in viewer:', item.title);
  },
  fnThumbnailOpen: function(item) {
    console.log('Opening item:', item.title);
  },

  // Data processing callback
  fnProcessData: function(item, source, sourceData) {
    // Modify item data after loading from source
    item.title = item.title.toUpperCase();
  }
});
```
```

--------------------------------

### Google Photos Data Source Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Set up nanogallery2 to display Google Photos albums and photos using the nanogp2 backend service. Configure thumbnailing, image quality, and zoom.

```javascript
$("#google_gallery").nanogallery2({
  kind: 'google2',
  userID: 'your_google_user_id',
  google2URL: 'https://yourserver.com/nanogp2/index.php',
  thumbnailWidth: 250,
  thumbnailHeight: 250,
  thumbnailCrop: true,
  viewerImageDisplay: 'bestImageQuality',
  viewerZoom: true
});
```

--------------------------------

### Configure RTL Layout Support

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Enables right-to-left layout mode and customizes icons for RTL-specific navigation.

```javascript
$('#rtl_gallery').nanogallery2({
  items: [...],
  RTL: true,
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailAlignment: 'right',
  icons: {
    breadcrumbSeparator: '<i class="nGY2Icon-right-open"></i>',  // Reversed for RTL
    breadcrumbSeparatorRtl: '<i class="nGY2Icon-left-open"></i>'
  }
});
```

--------------------------------

### Subscribe to Nanogallery2 Events

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Utilize callback functions within the gallery configuration to respond to various gallery events, from rendering to user interactions.

```javascript
$('#event_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  // Gallery render callbacks
  fnGalleryRenderStart: function() {
    console.log('Gallery render started');
  },
  fnGalleryRenderEnd: function() {
    console.log('Gallery render completed');
  },
  fnGalleryObjectModelBuilt: function() {
    console.log('Gallery object model built');
  },
  fnGalleryLayoutApplied: function() {
    console.log('Gallery layout applied');
  },

  // Thumbnail callbacks
  fnThumbnailInit: function($thumbnail, item, galleryIdx) {
    console.log('Thumbnail initialized:', item.title);
  },
  fnThumbnailHover: function($thumbnail, item) {
    console.log('Thumbnail hovered:', item.title);
  },
  fnThumbnailHoverOut: function($thumbnail, item) {
    console.log('Thumbnail hover out:', item.title);
  },
  fnThumbnailClicked: function($thumbnail, item) {
    console.log('Thumbnail clicked:', item.title);
    return true;  // Return false to prevent default action
  },
  fnThumbnailSelection: function($thumbnail, item, selected) {
    console.log('Selection changed:', item.title, selected);
  },

  // Viewer callbacks
  fnImgDisplayed: function(item) {
    console.log('Image displayed in viewer:', item.title);
  },
  fnThumbnailOpen: function(item) {
    console.log('Opening item:', item.title);
  },

  // Data processing callback
  fnProcessData: function(item, source, sourceData) {
    // Modify item data after loading from source
    item.title = item.title.toUpperCase();
  }
});
```

--------------------------------

### Lightbox Viewer Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Customize the appearance, toolbar, and behavior of the lightbox viewer.

```APIDOC
## Lightbox Viewer Configuration

Customize the lightbox viewer appearance, toolbar, and behavior.

```javascript
$('#lightbox_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  viewer: 'internal',
  viewerFullscreen: false,
  viewerZoom: true,
  viewerImageDisplay: 'bestImageQuality',  // Or 'upscale'

  imageTransition: 'swipe2',  // 'slideAppear', 'fade', 'swipe', 'swipe2'
  viewerHideToolsDelay: 4000,  // Auto-hide toolbar after 4 seconds

  viewerToolbar: {
    display: true,
    position: 'bottom',  // 'top', 'bottom'
    fullWidth: false,
    align: 'center',
    autoMinimize: 800,  // Auto-minimize on narrow screens
    standard: 'minimizeButton,label',
    minimized: 'minimizeButton,label,infoButton,shareButton,fullscreenButton'
  },

  viewerTools: {
    topLeft: 'pageCounter,playPauseButton',
    topRight: 'rotateLeft,rotateRight,fullscreenButton,closeButton'
  },

  viewerGallery: 'bottomOverMedia',  // 'bottomOverMedia', 'bottom', 'none'
  viewerGalleryTWidth: 40,
  viewerGalleryTHeight: 40
});
```
```

--------------------------------

### Implement Shopping Cart Functionality

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Integrate a shopping cart with Nanogallery2 for e-commerce features. Use shoppingCartGet to retrieve cart contents, shoppingCartUpdate to modify quantities, and shoppingCartRemove to delete items.

```javascript
$('#shop_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailToolbarImage: {
    topLeft: 'cart',
    topRight: 'info'
  },
  fnShoppingCartUpdated: function(cart, item, action) {
    console.log('Cart updated:', action, cart.length, 'items');
    updateCartUI(cart);
  }
});

// Get shopping cart contents
var cart = $('#shop_gallery').nanogallery2('shoppingCartGet');
cart.forEach(function(item) {
  console.log('Cart item:', item.ID, 'qty:', item.qty);
});

// Update item quantity in cart
$('#shop_gallery').nanogallery2('shoppingCartUpdate', 'item_id', 3);

// Remove item from cart
$('#shop_gallery').nanogallery2('shoppingCartRemove', 'item_id');
```

--------------------------------

### Configure Nanogallery2 Internationalization (i18n)

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Customize text labels for different languages to support internationalization or localization. Use the 'i18n' option to provide translations for various gallery elements.

```javascript
$('#i18n_gallery').nanogallery2({
  items: [...],
  i18n: {
    'breadcrumbHome': 'Galleries',
    'breadcrumbHome_FR': 'Galeries',
    'breadcrumbHome_DE': 'Galerien',
    'thumbnailImageTitle': '',
    'thumbnailAlbumTitle': '',
    'infoBoxPhoto': 'Photo',
    'infoBoxDate': 'Date',
    'infoBoxAlbum': 'Album',
    'infoBoxDimensions': 'Dimensions',
    'infoBoxFilename': 'Filename',
    'infoBoxFileSize': 'File size',
    'infoBoxCamera': 'Camera',
    'infoBoxFocalLength': 'Focal length',
    'infoBoxExposure': 'Exposure',
    'infoBoxFNumber': 'F Number',
    'infoBoxISO': 'ISO',
    'infoBoxViews': 'Views',
    'infoBoxComments': 'Comments'
  }
});
```

--------------------------------

### Manage Item Selection in Nanogallery2

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configure thumbnails for selection and manage selected items programmatically. Use itemsSelectedGet to retrieve selected items and itemsSetSelectedValue to set selection state.

```javascript
$('#selectable_gallery').nanogallery2({
  items: [...],
  thumbnailSelectable: true,
  thumbnailWidth: 300,
  thumbnailHeight: 200
});

// Get array of selected items
var selectedItems = $('#selectable_gallery').nanogallery2('itemsSelectedGet');
console.log('Selected:', selectedItems.length);

selectedItems.forEach(function(item) {
  console.log('Selected item:', item.title, item.GetID());
});

// Set selection state for items
$('#selectable_gallery').nanogallery2('itemsSetSelectedValue', [item1, item2], true);  // Select
$('#selectable_gallery').nanogallery2('itemsSetSelectedValue', [item1], false);  // Deselect
```

--------------------------------

### Multi-Level Albums Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Create hierarchical galleries with nested albums and breadcrumb navigation.

```APIDOC
## Multi-Level Albums

Create hierarchical galleries with nested albums and breadcrumb navigation.

```javascript
$('#album_gallery').nanogallery2({
  kind: 'flickr',
  userID: '34858669@N00',
  flickrAPIKey: 'your_api_key',
  displayBreadcrumb: true,
  breadcrumbOnlyCurrentLevel: true,
  breadcrumbAutoHideTopLevel: true,
  breadcrumbHideIcons: false,
  thumbnailLevelUp: true,  // Show "back" navigation thumbnail
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  // Different settings for album level (L1) vs image level (LN)
  thumbnailL1Width: 350,
  thumbnailL1Height: 250,
  galleryL1MaxRows: 2,
  galleryMaxRows: 4
});
```
```

--------------------------------

### Configure Lightbox Viewer

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Customize the appearance, toolbar layout, and transition effects of the internal lightbox viewer.

```javascript
$('#lightbox_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,

  viewer: 'internal',
  viewerFullscreen: false,
  viewerZoom: true,
  viewerImageDisplay: 'bestImageQuality',  // Or 'upscale'

  imageTransition: 'swipe2',  // 'slideAppear', 'fade', 'swipe', 'swipe2'
  viewerHideToolsDelay: 4000,  // Auto-hide toolbar after 4 seconds

  viewerToolbar: {
    display: true,
    position: 'bottom',  // 'top', 'bottom'
    fullWidth: false,
    align: 'center',
    autoMinimize: 800,  // Auto-minimize on narrow screens
    standard: 'minimizeButton,label',
    minimized: 'minimizeButton,label,infoButton,shareButton,fullscreenButton'
  },

  viewerTools: {
    topLeft: 'pageCounter,playPauseButton',
    topRight: 'rotateLeft,rotateRight,fullscreenButton,closeButton'
  },

  viewerGallery: 'bottomOverMedia',  // 'bottomOverMedia', 'bottom', 'none'
  viewerGalleryTWidth: 40,
  viewerGalleryTHeight: 40
});
```

--------------------------------

### Enable Pagination for Thumbnail Navigation

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Add pagination to display thumbnails in pages with navigation controls. Configure galleryDisplayMode to 'pagination' and set pagination options.

```javascript
$"#paginated_gallery".nanogallery2({
  items: [...],
  galleryDisplayMode: 'pagination',
  galleryMaxRows: 3,
  galleryPaginationMode: 'rectangles',
  paginationVisiblePages: 10,
  galleryPaginationTopButtons: true,
  paginationSwipe: true,
  thumbnailWidth: 200,
  thumbnailHeight: 150
});
```

--------------------------------

### Navigate Gallery Pages Programmatically

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Control gallery pagination using methods like nextPage, previousPage, and gotoPage. Use paginationCountPages to retrieve the total number of pages.

```javascript
// Go to next page
$('#my_gallery').nanogallery2('paginationNextPage');

// Go to previous page
$('#my_gallery').nanogallery2('paginationPreviousPage');

// Go to specific page (zero-indexed)
$('#my_gallery').nanogallery2('paginationGotoPage', 3);

// Get total number of pages
var totalPages = $('#my_gallery').nanogallery2('paginationCountPages');
```

--------------------------------

### Pagination Control API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Navigate between gallery pages programmatically.

```APIDOC
## Pagination Control API

### Description
Navigate between gallery pages programmatically.

### Methods
- `paginationNextPage()`: Go to the next page.
- `paginationPreviousPage()`: Go to the previous page.
- `paginationGotoPage(pageIndex)`: Go to a specific page (zero-indexed).
- `paginationCountPages()`: Get the total number of pages.

### Example Usage
```javascript
// Go to next page
$('#my_gallery').nanogallery2('paginationNextPage');

// Go to previous page
$('#my_gallery').nanogallery2('paginationPreviousPage');

// Go to specific page (zero-indexed)
$('#my_gallery').nanogallery2('paginationGotoPage', 3);

// Get total number of pages
var totalPages = $('#my_gallery').nanogallery2('paginationCountPages');
```
```

--------------------------------

### JavaScript Items Data Source for Gallery

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Provide gallery items programmatically using the `items` option for dynamic content. Configure thumbnail dimensions, pagination, and lightbox behavior.

```javascript
$("#my_gallery").nanogallery2({
  items: [
    { src: 'images/large/photo1.jpg', srct: 'images/thumbs/photo1.jpg', title: 'Mountain View', description: 'A stunning mountain landscape' },
    { src: 'images/large/photo2.jpg', srct: 'images/thumbs/photo2.jpg', title: 'Ocean Waves', description: 'Crashing waves on the shore' },
    { src: 'images/large/photo3.jpg', srct: 'images/thumbs/photo3.jpg', title: 'City Lights', description: 'Urban nightscape', tags: 'urban night' },
    { src: 'images/large/photo4.jpg', srct: 'images/thumbs/photo4.jpg', title: 'Forest Trail', customData: { photographer: 'John Doe' } }
  ],
  itemsBaseURL: 'https://example.com/',
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  galleryDisplayMode: 'pagination',
  galleryMaxRows: 3,
  thumbnailOpenInLightox: true
});
```

--------------------------------

### Control Gallery Display

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Manage gallery state, resizing, and data retrieval using API methods.

```javascript
// Refresh the gallery display
$('#my_gallery').nanogallery2('refresh');

// Force resize (useful after container size changes)
$('#my_gallery').nanogallery2('resize');

// Reload current album from data source
$('#my_gallery').nanogallery2('reload');

// Display a specific item by ID
$('#my_gallery').nanogallery2('displayItem', 'item_id');

// Get gallery instance for advanced operations
var instance = $('#my_gallery').nanogallery2('instance');

// Get gallery data (items, GOM, VOM, shopping cart)
var data = $('#my_gallery').nanogallery2('data');
console.log(data.items);  // Array of all items
console.log(data.gallery);  // Gallery Object Model
console.log(data.lightbox);  // Viewer Object Model
```

--------------------------------

### Flickr Data Source Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configure nanogallery2 to display Flickr photosets or photostreams. Requires a Flickr API key and specifies options for thumbnailing, item limits, sorting, and blocking content.

```javascript
$("#flickr_gallery").nanogallery2({
  kind: 'flickr',
  userID: '34858669@N00',
  flickrAPIKey: 'your_flickr_api_key_here',
  photoset: 'album_id_or_none',  // Use 'NONE' for full photostream
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailCrop: true,
  galleryMaxItems: 100,
  gallerySorting: 'RANDOM',
  blockList: 'scrapbook|profil',
  tagBlockList: 'private|hidden'
});
```

--------------------------------

### Enable Deeplinking and Location Hash

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Configures the gallery to update the browser URL hash when navigating between albums or images.

```javascript
$('#deeplink_gallery').nanogallery2({
  kind: 'flickr',
  userID: '34858669@N00',
  flickrAPIKey: 'your_api_key',
  locationHash: true,  // Enable URL hash navigation
  // URLs will look like: example.com/gallery#album_id/image_id
  thumbnailWidth: 300,
  thumbnailHeight: 200
});
```

--------------------------------

### HTML Markup Data Source for Gallery

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Define gallery items directly in HTML using data attributes for static galleries. This method does not require an external data provider.

```html
<!-- Simple markup-based gallery -->
<div id="my_gallery" data-nanogallery2='{
  "thumbnailWidth": 150,
  "thumbnailHeight": 150,
  "thumbnailBorderHorizontal": 2,
  "thumbnailBorderVertical": 2
}'>
  <a href="images/photo1_large.jpg"
     data-ngthumb="images/photo1_thumb.jpg"
     data-ngdesc="Beautiful sunset over the mountains">
    Sunset Photo
  </a>
  <a href="images/photo2_large.jpg"
     data-ngthumb="images/photo2_thumb.jpg"
     data-ngdesc="City skyline at night">
    City Night
  </a>
  <a href="images/photo3_large.jpg"
     data-ngthumb="images/photo3_thumb.jpg"
     data-ngdesc="Forest path in autumn">
    Autumn Forest
  </a>
</div>
```

--------------------------------

### Replace Nanogallery2 Icons with Custom Icons

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Customize the gallery's appearance by replacing default icons with custom ones, such as Font Awesome icons. Use the 'icons' option to specify HTML for thumbnail, viewer, and navigation icons.

```javascript
$('#custom_icons_gallery').nanogallery2({
  items: [...],
  icons: {
    // Thumbnail icons
    thumbnailAlbum: '<i class="fa fa-folder"></i>',
    thumbnailImage: '<i class="fa fa-image"></i>',
    thumbnailSelected: '<i class="fa fa-check-circle" style="color:#0f0;"></i>',
    thumbnailUnselected: '<i class="fa fa-circle-o"></i>',
    thumbnailFeatured: '<i class="fa fa-star" style="color:gold;"></i>',
    thumbnailShare: '<i class="fa fa-share-alt"></i>',
    thumbnailDownload: '<i class="fa fa-download"></i>',
    thumbnailInfo: '<i class="fa fa-info-circle"></i>',
    thumbnailShoppingcart: '<i class="fa fa-shopping-cart"></i>',

    // Viewer icons
    buttonClose: '<i class="fa fa-times"></i>',
    viewerPrevious: '<i class="fa fa-chevron-left"></i>',
    viewerNext: '<i class="fa fa-chevron-right"></i>',
    viewerDownload: '<i class="fa fa-download"></i>',
    viewerZoomIn: '<i class="fa fa-search-plus"></i>',
    viewerZoomOut: '<i class="fa fa-search-minus"></i>',
    viewerFullscreenOn: '<i class="fa fa-expand"></i>',
    viewerFullscreenOff: '<i class="fa fa-compress"></i>',
    viewerPlay: '<i class="fa fa-play"></i>',
    viewerPause: '<i class="fa fa-pause"></i>',
    viewerRotateLeft: '<i class="fa fa-rotate-left"></i>',
    viewerRotateRight: '<i class="fa fa-rotate-right"></i>',

    // Navigation icons
    breadcrumbHome: '<i class="fa fa-home"></i>',
    breadcrumbSeparator: '<i class="fa fa-angle-right"></i>',
    paginationPrevious: '<i class="fa fa-angle-left"></i>',
    paginationNext: '<i class="fa fa-angle-right"></i>'
  }
});
```

--------------------------------

### API - Gallery Control

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Control gallery display, refresh, and navigation programmatically.

```APIDOC
## API - Gallery Control

Control gallery display, refresh, and navigation programmatically.

```javascript
// Refresh the gallery display
$('#my_gallery').nanogallery2('refresh');

// Force resize (useful after container size changes)
$('#my_gallery').nanogallery2('resize');

// Reload current album from data source
$('#my_gallery').nanogallery2('reload');

// Display a specific item by ID
$('#my_gallery').nanogallery2('displayItem', 'item_id');

// Get gallery instance for advanced operations
var instance = $('#my_gallery').nanogallery2('instance');

// Get gallery data (items, GOM, VOM, shopping cart)
var data = $('#my_gallery').nanogallery2('data');
console.log(data.items);  // Array of all items
console.log(data.gallery);  // Gallery Object Model
console.log(data.lightbox);  // Viewer Object Model
```
```

--------------------------------

### Item Selection API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Manage item selection for building selection-based features.

```APIDOC
## Item Selection API

### Description
Manage item selection for building selection-based features.

### Methods
- `itemsSelectedGet()`: Get an array of currently selected items.
- `itemsSetSelectedValue(items, selected)`: Set the selection state for specified items.

### Configuration Options
- `thumbnailSelectable` (boolean): Enable thumbnail selection.

### Example Usage
```javascript
$('#selectable_gallery').nanogallery2({
  items: [...],
  thumbnailSelectable: true,
  thumbnailWidth: 300,
  thumbnailHeight: 200
});

// Get array of selected items
var selectedItems = $('#selectable_gallery').nanogallery2('itemsSelectedGet');
console.log('Selected:', selectedItems.length);

selectedItems.forEach(function(item) {
  console.log('Selected item:', item.title, item.GetID());
});

// Set selection state for items
$('#selectable_gallery').nanogallery2('itemsSetSelectedValue', [item1, item2], true);  // Select
$('#selectable_gallery').nanogallery2('itemsSetSelectedValue', [item1], false);  // Deselect
```
```

--------------------------------

### Implement Tag Filtering

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Enable UI controls for filtering gallery items based on assigned tags.

```javascript
$('#filtered_gallery').nanogallery2({
  items: [
    { src: 'photo1.jpg', srct: 'thumb1.jpg', title: 'Beach', tags: 'nature vacation' },
    { src: 'photo2.jpg', srct: 'thumb2.jpg', title: 'City', tags: 'urban travel' },
    { src: 'photo3.jpg', srct: 'thumb3.jpg', title: 'Mountain', tags: 'nature hiking' }
  ],
  galleryFilterTags: true,  // Enable tag filter UI
  galleryFilterTagsMode: 'multiple',  // 'single' or 'multiple' tag selection
  thumbnailWidth: 300,
  thumbnailHeight: 200
});
```

--------------------------------

### Configure Mosaic Layout with Custom Patterns

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Define custom mosaic patterns for creative layouts using the galleryMosaic option, specifying width (w) and height (h) for each cell.

```javascript
$"#mosaic_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: 200,
  thumbnailHeight: 200,
  galleryMosaic: [
    { w: 2, h: 2 },
    { w: 1, h: 1 },
    { w: 1, h: 1 },
    { w: 1, h: 2 },
    { w: 2, h: 1 }
  ],
  thumbnailGutterWidth: 5,
  thumbnailGutterHeight: 5
});
```

--------------------------------

### API - Search and Filter

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Use API methods to programmatically search and filter gallery items.

```APIDOC
## API - Search and Filter

Use API methods to programmatically search and filter gallery items.

```javascript
// Initialize gallery
$('#searchable_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200
});

// Search in titles - returns array of matching items
var results = $('#searchable_gallery').nanogallery2('search', 'sunset');

// Search in both titles and tags
var searchResults = $('#searchable_gallery').nanogallery2('search2', 'nature', 'titleTags');

// Execute search and refresh display
$('#searchable_gallery').nanogallery2('search2Execute');

// Clear search
$('#searchable_gallery').nanogallery2('search', '');
```
```

--------------------------------

### API - Lightbox Control

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Control the lightbox viewer programmatically.

```APIDOC
## API - Lightbox Control

Control the lightbox viewer programmatically.

```javascript
// Close the lightbox viewer
$('#my_gallery').nanogallery2('closeViewer');

// Toggle toolbar visibility
$('#my_gallery').nanogallery2('minimizeToolbar');
$('#my_gallery').nanogallery2('maximizeToolbar');
```
```

--------------------------------

### Tag Filtering Configuration

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Enable tag-based filtering to allow users to filter gallery items by categories.

```APIDOC
## Tag Filtering

Enable tag-based filtering to allow users to filter gallery items by categories.

```javascript
$('#filtered_gallery').nanogallery2({
  items: [
    { src: 'photo1.jpg', srct: 'thumb1.jpg', title: 'Beach', tags: 'nature vacation' },
    { src: 'photo2.jpg', srct: 'thumb2.jpg', title: 'City', tags: 'urban travel' },
    { src: 'photo3.jpg', srct: 'thumb3.jpg', title: 'Mountain', tags: 'nature hiking' }
  ],
  galleryFilterTags: true,  // Enable tag filter UI
  galleryFilterTagsMode: 'multiple',  // 'single' or 'multiple' tag selection
  thumbnailWidth: 300,
  thumbnailHeight: 200
});
```
```

--------------------------------

### Shopping Cart API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Manage a shopping cart for e-commerce gallery implementations.

```APIDOC
## Shopping Cart API

### Description
Manage a shopping cart for e-commerce gallery implementations.

### Methods
- `shoppingCartGet()`: Get the current shopping cart contents.
- `shoppingCartUpdate(itemId, quantity)`: Update the quantity of an item in the cart.
- `shoppingCartRemove(itemId)`: Remove an item from the cart.

### Configuration Options
- `thumbnailToolbarImage.topLeft`: Can be set to 'cart' to display a cart icon.
- `fnShoppingCartUpdated`: Callback function triggered when the cart is updated.

### Example Usage
```javascript
$('#shop_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailToolbarImage: {
    topLeft: 'cart',
    topRight: 'info'
  },
  fnShoppingCartUpdated: function(cart, item, action) {
    console.log('Cart updated:', action, cart.length, 'items');
    updateCartUI(cart);
  }
});

// Get shopping cart contents
var cart = $('#shop_gallery').nanogallery2('shoppingCartGet');
cart.forEach(function(item) {
  console.log('Cart item:', item.ID, 'qty:', item.qty);
});

// Update item quantity in cart
$('#shop_gallery').nanogallery2('shoppingCartUpdate', 'item_id', 3);

// Remove item from cart
$('#shop_gallery').nanogallery2('shoppingCartRemove', 'item_id');
```
```

--------------------------------

### Search and Filter via API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Programmatically search gallery items by title or tags and refresh the display.

```javascript
// Initialize gallery
$('#searchable_gallery').nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200
});

// Search in titles - returns array of matching items
var results = $('#searchable_gallery').nanogallery2('search', 'sunset');

// Search in both titles and tags
var searchResults = $('#searchable_gallery').nanogallery2('search2', 'nature', 'titleTags');

// Execute search and refresh display
$('#searchable_gallery').nanogallery2('search2Execute');

// Clear search
$('#searchable_gallery').nanogallery2('search', '');
```

--------------------------------

### Destroy Nanogallery2 Instance

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Clean up gallery resources and remove the instance from the DOM. The element can be reinitialized after destruction.

```javascript
// Destroy the gallery completely
$('#my_gallery').nanogallery2('destroy');

// Element is now empty and can be reinitialized
$('#my_gallery').nanogallery2({ items: [...] });
```

--------------------------------

### Control Lightbox Viewer via API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Programmatically close the lightbox or toggle toolbar visibility.

```javascript
// Close the lightbox viewer
$('#my_gallery').nanogallery2('closeViewer');

// Toggle toolbar visibility
$('#my_gallery').nanogallery2('minimizeToolbar');
$('#my_gallery').nanogallery2('maximizeToolbar');
```

--------------------------------

### Add Thumbnail Stacks for Layered Effect

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Apply decorative stacks behind thumbnails for a layered visual effect using thumbnailStacks and related properties for translation, rotation, and scaling.

```javascript
$"#stacks_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailStacks: 3,
  thumbnailStacksTranslateX: 5,
  thumbnailStacksTranslateY: -5,
  thumbnailStacksTranslateZ: -30,
  thumbnailStacksRotateX: 0,
  thumbnailStacksRotateY: 0,
  thumbnailStacksRotateZ: 2,
  thumbnailStacksScale: 0.98
});
```

--------------------------------

### Destroy API

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Remove the gallery instance and clean up resources.

```APIDOC
## Destroy API

### Description
Remove the gallery instance and clean up resources.

### Method
- `destroy()`: Destroys the gallery instance completely.

### Example Usage
```javascript
// Destroy the gallery completely
$('#my_gallery').nanogallery2('destroy');

// Element is now empty and can be reinitialized
$('#my_gallery').nanogallery2({ items: [...] });
```
```

--------------------------------

### Apply Thumbnail Hover Effects

Source: https://context7.com/nanostudio-org/nanogallery2/llms.txt

Add animated hover effects to thumbnails using thumbnailHoverEffect2. Effects can be a single string or an array of chained animations with custom settings.

```javascript
$"#hover_effects_gallery".nanogallery2({
  items: [...],
  thumbnailWidth: 300,
  thumbnailHeight: 200,
  thumbnailHoverEffect2: 'toolsAppear',
  thumbnailHoverEffect2: [
    { name: 'scale', from: 1, to: 1.1, duration: 300, easing: 'easeOutQuad' },
    { name: 'blur', from: 0, to: 3, duration: 300 },
    { name: 'brightness', from: '100%', to: '50%', duration: 300 },
    { name: 'labelSlideUp', duration: 200 }
  ],
  touchAnimation: true,
  touchAutoOpenDelay: 500
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.