nanogallery2 API - reference guide

Examples of API / callbacks / events usage

Add items dynamically to an existing gallery: view demo on codepen
Shopping cart: view demo on codepen
Thumbnail selection handling: view demo on codepen
Thumbnails: add custom tool and custom button: view demo on codepen
Integrate Youtube videos with fancyBox3: view demo on codepen

Events

Example:

// Attach an event handler function for some events to the gallery
$("#nanogallery2").on( 'pageChanged.nanogallery2 galleryRenderStart.nanogallery2 galleryRenderEnd.nanogallery2 galleryObjectModelBuilt.nanogallery2 galleryLayoutApplied.nanogallery2 galleryDisplayed.nanogallery2 lightboxNextImage.nanogallery2 lightboxPreviousImage.nanogallery2 lightboxImageDisplayed.nanogallery2 shoppingCartUpdated.nanogallery2 itemSelected.nanogallery2 itemUnSelected.nanogallery2', my_listener );

// Event handler function
function my_listener(e) {
  console.log(e.type);
}
      

Callbacks

Callbacks provide a simple mechanism to extend the capabilities of nanogallery2 with your own javascript functions.
Since v1.3, callbacks are supported in HTML markup mode.

// Build the gallery
jQuery("#nanogallery2").nanogallery2({

  fnShoppingCartUpdated: mylistener,            // set the callback function

  thumbnailHeight: 100, thumbnailWidth: 100,
  ...
});

// Callback function
function mylistener( cart, item ) {
  alert("Shopping cart updated. More details in your browser's console.");
  console.log("### item:");
  console.dir(item);
  console.log("### shopping cart:");
  console.dir(cart);
}

      

// Enable selection mode
$('#my_nanogallery2').nanogallery2('option', 'thumbnailSelectable', true);

// Disable selection mode
$('#my_nanogallery2').nanogallery2('option', 'thumbnailSelectable', false);

      

var items=$('#your_nanogallery2').nanogallery2('data').gallery.items;
items.forEach( function(curr) {
  if( curr.selected === true ) {
    console.dir(curr);
  }
});