nanogallery2

nanogallery2 creates beautiful, modern and high-quality image galleries for your website







nanogallery2 API - reference guide




Need more customzing possibilities? Here's the section for the experts. Javascript knowledge required.





Events


Events (also available in your browser debug console):
event description min
version
pageChanged.nanogallery2 Fired on gallery pagination. 1.0
galleryRenderStart.nanogallery2 The rendering of the gallery is started. 1.0
galleryRenderEnd.nanogallery2 The galery has been rendered. 1.0
galleryObjectModelBuilt.nanogallery2 The Gallery Object Model(GOM) has been populated with all the items. 1.0
galleryLayoutApplied.nanogallery2 The layout has been applied to the gallery/thumbnails.
This can be called several times, for example when thumbnails image sizes are not defined.
1.0
galleryDisplayed.nanogallery2 The thumbnails have been displayed. 1.0
lightboxNextImage.nanogallery2 Lightbox - display next image. 1.0
lightboxPreviousImage.nanogallery2 Lightbox - display previous image. 1.0
lightboxImageDisplayed.nanogallery2 Lightbox - image displayed. 1.0
shoppingCartUpdated.nanogallery2 Called when the shopping cart is updated (new item or item updated).
view demo
1.0
itemSelected.nanogallery2 One thumbnail has been selecetd. 1.1
itemUnSelected.nanogallery2 One thumbnail has been un-selecetd. 1.1



Callbacks


Callbacks provide a simple mechanism to extend the capabilities of nanogallery2 with your own javascript functions.
callback description min
version
fnShoppingCartUpdated Called when the shopping cart is updated (new item or item updated). 1.0
fnGalleryRenderStart Called before rendering the gallery.
Parameter: albumIndex
1.0
fnGalleryRenderEnd Called after the gallery has been rendered.
Parameter: albumIndex
1.0
fnGalleryObjectModelBuilt Called after the GOM has been built. 1.0
fnGalleryLayoutApplied Called after the layout has been applied to the gallery/thumbnails.
This can be called several times, for example when thumbnails image sizes are not defined.
1.0
fnThumbnailInit Called once after one thumbnail's build. Called for each thumbnail.
Parameters: $thumbnail, item, GOMidx
1.0
fnThumbnailHoverInit Called once to initialize the thumbnail hover effect. Called for each thumbnail.
Parameters: $thumbnail, item, GOMidx
1.0
fnThumbnailHover Called on thumbnail hover.
Parameters: $thumbnail, item, GOMidx
1.0
fnThumbnailHoverOut Called on thumbnail hover out.
Parameters: $thumbnail, item, GOMidx
1.0
fnThumbnailDisplayEffect Called to display one thumbnail, after it was built.
Parameters: $thumbnail, item, GOMidx, delay
1.0
fnThumbnailOpen Called when a thumbnail is clicked/touched to display the image.
Can be used to replace the standard viewer/lightbox with an external lightbox.
Parameter: items, array containing the list of items to display, the first one is the first to display.
1.0
fnImgToolbarCustInit Lightbox toolbar custom element.
To customize the toolbar (custom icons and elements) on image display.
Called once when the toolbar is build to define the specified custom elements.
The called function should return the HTML content to display.
Parameter: customElemntName
1.0
fnImgToolbarCustDisplay Lightbox toolbar custom element.
Called each time after an image has been displayed.
Called once for all toolbar custom icons and elements.
Parameters: $customToolbarElements, item
1.0
fnImgToolbarCustClick Lightbox toolbar custom element.
Fired on click event on image toolbar custom element.
Parameters: customElementName, $customIcon, item
1.0
fnProcessData Used to extend data associated to thumbnails/images.
Called each time a new element (image or album) is added.
Parameters: item, kind, sourceData
1.0
1.0



API methods


Call nanogallery2 function directly in your javascript functions.
Usage: $('#your_nanogallery2').nanogallery2('method', options);
method option(s) description min
version
refresh Re-desplay the current gallery.
Usage: $('#your_nanogallery2').nanogallery2('refresh');
1.0
search search_string Filter the displayed thumbnails based on a search string. Search is done in titles.
Usage: $('#your_nanogallery2').nanogallery2('search', search_string);
view demo on codepen
1.0
instance Returns a pointer to the data of the gallery instance.
Usage: $('#your_nanogallery2').nanogallery2('instance');
view demo on codepen
1.0
data Returns an object pointing to:
  - items (array): with all the gallery items (albums and images)
  - gallery (object): the GOM - Gallery Object Model of the current gallery
  - viewer (object): the VOM - Viewer Object Model of the current lightbox

Usage: $('#your_nanogallery2').nanogallery2('data');

Example: get all the items (images and albums)
items=$('#your_nanogallery2').nanogallery2('data').items

Example: retrieve the selected thumbnails
                
var items=$('#your_nanogallery2').nanogallery2('data').gallery.items;
items.forEach( function(curr) {
  if( curr.selected === true ) {
    console.dir(curr);
  }
});
1.0
destroy Removes the gallery.
Usage: $('#your_nanogallery2').nanogallery2('destroy');
1.0
displayItem itemID Displays an item (album or image).
Usage: $('#your_nanogallery2').nanogallery2('displayItem', 'itemID');
- to display an album: $('#your_nanogallery2').nanogallery2('displayItem', 'albumID');
- to display an image: $('#your_nanogallery2').nanogallery2('displayItem', 'albumID/imageID');
1.0
reload Reloads the current album.
Usage: $('#your_nanogallery2').nanogallery2('reload');
1.0
option option_name Returns the value of an option.
Usage: var optionValue=$('#your_nanogallery2').nanogallery2('option', option_name);
1.0
option option_name,
new_value
Sets the value of an option (note: only some options are supported).
Usage: $('#your_nanogallery2').nanogallery2('option', option_name, new_value);
1.0
itemsSelectedGet Returns an array with all the selected items (array of objects).
Usage: var lstItems=$('#your_nanogallery2').nanogallery2('itemsSelectedGet');
1.0
itemsSetSelectedValue [item1, item2, ...] Sets/unsets selection value (true/false) of an array of items.
Usage: $('#your_nanogallery2').nanogallery2('itemsSetSelectedValue', [item1, item2, item3, ...], new_value);
1.0
closeViewer Close the image viewer.
Usage: $('#your_nanogallery2').nanogallery2('closeViewer');
1.0
minimizeToolbar Minimize image viewer toolbar.
Usage: $('#your_nanogallery2').nanogallery2('minimizeToolbar');
1.0
maximizeToolbar Maximize image viewer toolbar.
Usage: $('#your_nanogallery2').nanogallery2('maximizeToolbar');
1.0
shoppingCartGet Returns an array containing all the items in the shopping cart.
One item content: idx=internal index, ID=your image ID, cnt=counter
Usage: var basket=$('#your_nanogallery2').nanogallery2('shoppingCartGet');
1.0
shoppingCartUpdate image ID, counter Update the counter of one image in the shopping cart. Returns the shopping cart.
Usage: $('#your_nanogallery2').nanogallery2('shoppingCartUpdate', imageID, newCounter);
1.0
shoppingCartRemove image ID Removes one image from the shopping cart. Returns the shopping cart.
Usage: $('#your_nanogallery2').nanogallery2('shoppingCartRemove', imageID);
1.0
1.0
1.0



Examples


- add items dynamically to an existing gallery: view demo on codepen
- thumbnails: add cutom tool and custom button: view demo on codepen