Full Featured Photo Gallery Plugin For jQuery - nanoGallery 2

Full Featured Photo Gallery Plugin For jQuery - nanoGallery 2
File Size: 558 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

nanoGallery 2 is powerful yet easy-to-use jQuery plugin used for generating a responsive, mobile-friendly photo gallery & lightbox on the webpage.

Key features:

  • Supports Flickr & Google Photos.
  • Automatically generates a thumbnail grid layout on the webpage.
  • Clicks on the thumbnail to view all the images in a lightbox popup.
  • Autoplay is supported.
  • Fullscreen mode is supported.
  • Tons of configuration options, API methods and events.
  • Shareable and Downloadable images.


npm install nanogallery2

# Bower
bower install nanogallery2

Basic usage:

1. Load the following CSS & JavaScript files into your html document.

<link href="nanogallery2.woff.min.css" rel="stylesheet">
<link href="nanogallery2.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.nanogallery2.js"></script>

2. Embed a group of image links into your webpage. You can specify the thumbnail images using the data-ngThumb attribute as this:

<a href="1.jpg" data-ngThumb="thumb-1.jpg"></a>
<a href="2.jpg" data-ngThumb="thumb-2.jpg"></a>
<a href="3.jpg" data-ngThumb="thumb-3.jpg"></a>

3. To initialize the gallery plugin automatically, just add the image links to a DIV container with the data-nanogallery2 and we're done:

<div data-nanogallery2>
  <a href="1.jpg" data-ngThumb="thumb-1.jpg"></a>
  <a href="2.jpg" data-ngThumb="thumb-2.jpg"></a>
  <a href="3.jpg" data-ngThumb="thumb-3.jpg"></a>

4. You can also initialize the gallery plugin via JavaScript as this:

  // options here

5. All HTML data attributes:

  • data-ngdesc: Element description. 
  • data-ngid: Item ID. MANDATORY if albums used: please set a value to each item (image and album). 
  • data-ngalbumid: ID of the album containing the item. MANDATORY if albums used.
  • data-ngkind: Item's kind. Possible values: 'image', 'album'.
  • data-ngthumb: URL of the thumbnail image.
  • data-ngthumbImgHeight: Height of the thumbnail image (in pixels). Not mandatory, but should be defined to improve overall performances. 
  • data-ngthumbImgWidth: Width of the thumbnail image (in pixels). Not mandatory, but should be defined to improve overall performances.
  • data-ngdest: Destination URL on thumbnail click (instead of displaying an image, the user is redirected to the defined URL).
  • data-ngtags: Image tags 
  • data-ngexifmodel: Exif model 
  • data-ngexifflash: Exif flash 
  • data-ngexiffocallength: Exif focal length
  • data-ngexiffstop: Exif fstop 
  • data-ngexifexposure: Exif exposure
  • data-ngexifiso: Exif ISO 
  • data-ngexiftime: Exif date/time 
  • data-ngexiflocation: Exif location - this value is used to display the image location with Google Maps on the image info window.

6. All possible plugin options & callback functions which can be passed via either JavaScript or HTML data attribute:

<div data-nanogallery2='{ OPTIONS }' ></div>
kind :                        '',    // kind of the content source
userID :                      '',
photoset :                    '',
album:                        '',
blackList :                   'scrapbook|profil',
whiteList :                   '',
albumList :                   '',
RTL :                         false,
poogleplusUseUrlCrossDomain : true,
flickrSkipOriginal :          true,
breadcrumbAutoHideTopLevel :  true,
displayBreadcrumb :           true,
breadcrumbOnlyCurrentLevel :  true,
breadcrumbHideIcons :         true,
theme :                       'nGY2',
colorScheme :                 'dark',
colorSchemeViewer :           'dark',
items :                       null,
itemsBaseURL :                '',
thumbnailSelectable :         false,
jsonCharset:                  'Latin',
jsonProvider:                 '',
allowHTMLinData:              false,
locationHash :                true,
slideshowDelay :              3000,
slideshowAutoStart :          false,

debugMode: false,

galleryDisplayMoreStep :      2,
galleryDisplayMode :          'fullContent',     // fullContent, pagination (+galleryMaxRows), moreButton (+galleryDisplayMoreStep) , rows (+galleryMaxRows)
galleryL1DisplayMode :        null,            // pagination, fullContent, moreButton*, rows
galleryPaginationMode :       'rectangles',   // 'dots', 'rectangles', 'numbers'
galleryMaxRows :              2,
galleryL1MaxRows :            null,
galleryLastRowFull:           false,
// galleryL1LastRowFull:      null,
galleryLayoutEngine :         'default',
paginationSwipe:              true,
paginationVisiblePages :      10,
paginationSwipeSensibilityVert : 10,
galleryFilterTags :           false,    // possible values: false, true, 'title', 'description'
galleryL1FilterTags :         null,   // possible values: false, true, 'title', 'description'
galleryMaxItems :             0,         // maximum number of items per album  --> only flickr, google+, nanophotosprovider
galleryL1MaxItems :           null,    // maximum number of items per gallery page --> only flickr, google+, nanophotosprovider
gallerySorting :              '',
galleryL1Sorting :            null,
galleryResizeAnimation :      true,

thumbnailCrop :               true,
thumbnailCropScaleFactor :    1.5,
thumbnailLevelUp :            false,
thumbnailAlignment :          'center',
thumbnailWidth :              300,
thumbnailHeight :             200,
thumbnailGutterWidth :        2,
thumbnailGutterHeight :       2,
thumbnailBorderVertical :     2,
thumbnailBorderHorizontal :   2,
thumbnailFeaturedKeyword :    '*featured',
thumbnailAlbumDisplayImage :  false,
thumbnailHoverEffect2 :       'toolsAppear',
thumbnailBuildInit2 :         '',
galleryBuildInit2 :           '',
portable :                    false,

touchAnimation :              true,
touchAutoOpenDelay :          0,

thumbnailLabel : {
  position :                  'overImageOnBottom',
  align:                      'center',
  display :                   true,
  displayDescription :        false,
  titleMaxLength :            0,
  titleMultiLine :            false,
  descriptionMaxLength :      0,
  descriptionMultiLine :      false,
  hideIcons :                 true,
  title :                     ''

// thumbnailToolbarImage : { position: 'topRight', content : 'share,socialShare,download,openFlick,openPicasa,likeFacebook,geolocalisation' },
thumbnailToolbarImage :       { topLeft: 'select', topRight : 'share,featured,download' },
thumbnailToolbarAlbum :       { topLeft: 'select', topRight : 'share,counter' },
thumbnailDisplayInterval :    30,
thumbnailDisplayTransition :  'fadeIn',
thumbnailDisplayTransitionDuration: 240,
thumbnailOpenImage :          true,
thumbnailOpenOriginal :       false,
thumbnailGlobalImageTitle :   '',
thumbnailGlobalAlbumTitle :   '',

viewer :                      'internal',
viewerFullscreen:             false,
viewerDisplayLogo :           true,
fancyBoxOptions :             null,
imageTransition :             'swipe',
viewerZoom :                  true,
openOnStart :                 '',
viewerToolbar : {
  display :                   true,
  position :                  'bottomOverImage',
  fullWidth :                 true,
  align :                     'center',
  autoMinimize :              0,
  standard :                  'minimizeButton,label',
  minimized :                 'minimizeButton,infoButton,downloadButton,linkOriginalButton,label,fullscreenButton,closeButton'
viewerTools : {
  topLeft :                   'pageCounter,playPauseButton',
  topRight :                  'zoomButton,shareButton,closeButton' 

breakpointSizeSM :            480,
breakpointSizeME :            992,
breakpointSizeLA :            1200,
breakpointSizeXL :            1800,

fnThumbnailInit :             null,
fnThumbnailHoverInit :        null,
fnThumbnailHover :            null,
fnThumbnailHoverOut :         null,
fnThumbnailDisplayEffect :    null,
fnViewerInfo :                null,
fnImgToolbarCustInit :        null,
fnImgToolbarCustDisplay :     null,
fnImgToolbarCustClick :       null,
fnProcessData :               null,
fnThumbnailSelection :        null,
fnInitGallery :               null,

i18n : {
  'breadcrumbHome' : 'Galleries', 'breadcrumbHome_FR' : 'Galeries',
  'thumbnailImageTitle' : '', 'thumbnailAlbumTitle' : '',
  'thumbnailImageDescription' : '', 'thumbnailAlbumDescription' : '',
  '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', 'infoBoxMake' : 'Make', 'infoBoxFlash' : 'Flash', 'infoBoxViews' : 'Views', 'infoBoxComments' : 'Comments'
icons : {
  // sample for font awesome: <i style="color:#eee;" class="fa fa-search-plus"></i>
  thumbnailAlbum:               '<i class="nGY2Icon icon-folder-empty"></i>',
  thumbnailImage:               '<i class="nGY2Icon icon-picture"></i>',
  breadcrumbAlbum:              '<i class="nGY2Icon icon-folder-empty"></i>',
  breadcrumbHome:               '<i class="nGY2Icon icon-home"></i>',
  breadcrumbSeparator:          '<i class="nGY2Icon icon-left-open"></i>',
  breadcrumbSeparatorRtl:       '<i class="nGY2Icon icon-right-open"></i>',
  navigationFilterSelected:     '<i style="color:#fff;" class="nGY2Icon icon-toggle-on"></i>',
  navigationFilterUnselected:   '<i style="color:#aaa;" class="nGY2Icon icon-toggle-off"></i>',
  navigationFilterSelectedAll:  '<i class="nGY2Icon icon-toggle-on"></i><i class="nGY2Icon icon-ok"></i>',
  thumbnailSelected:            '<i style="color:#bff;" class="nGY2Icon icon-ok-circled"></i>',
  thumbnailUnselected:          '<i style="color:#bff;" class="nGY2Icon icon-circle-empty"></i>',
  thumbnailFeatured:            '<i style="color:#dd5;" class="nGY2Icon icon-star"></i>',
  thumbnailCounter:             '<i class="nGY2Icon icon-picture"></i>',
  thumbnailShare:               '<i class="nGY2Icon icon-ngy2_share2"></i>',
  thumbnailDownload:            '<i class="nGY2Icon icon-ngy2_download2"></i>',
  thumbnailInfo:                '<i class="nGY2Icon icon-ngy2_info2"></i>',
  thumbnailCart:                '<i class="nGY2Icon icon-basket"></i>',
  thumbnailAlbumUp:             '<i style="font-size: 3em;" class="nGY2Icon icon-ngy2_chevron_up2"></i>',
  paginationNext:               '<i class="nGY2Icon icon-right-open"></i>',
  paginationPrevious:           '<i class="nGY2Icon icon-left-open"></i>',
  galleryMoreButton:            '<i class="nGY2Icon icon-picture"></i> &nbsp; <i class="nGY2Icon icon-right-open"></i>',
  buttonClose:                  '<i class="nGY2Icon icon-ngy2_close2"></i>',
  viewerPrevious:               '<i class="nGY2Icon icon-ngy2_chevron-left"></i>',
  viewerNext:                   '<i class="nGY2Icon icon-ngy2_chevron-right"></i>',
  viewerImgPrevious:            '<i class="nGY2Icon icon-ngy2_chevron_left3"></i>',
  viewerImgNext:                '<i class="nGY2Icon icon-ngy2_chevron_right3"></i>',
  viewerDownload:               '<i class="nGY2Icon icon-ngy2_download2"></i>',
  viewerToolbarMin:             '<i class="nGY2Icon icon-ellipsis-vert"></i>',
  viewerToolbarStd:             '<i class="nGY2Icon icon-menu"></i>',
  viewerPlay:                   '<i class="nGY2Icon icon-play"></i>',
  viewerPause:                  '<i class="nGY2Icon icon-pause"></i>',
  viewerFullscreenOn:           '<i class="nGY2Icon icon-resize-full"></i>',
  viewerFullscreenOff:          '<i class="nGY2Icon icon-resize-small"></i>',
  viewerZoomIn:                 '<i class="nGY2Icon icon-ngy2_zoom_in2"></i>',
  viewerZoomOut:                '<i class="nGY2Icon icon-ngy2_zoom_out2"></i>',
  viewerLinkOriginal:           '<i class="nGY2Icon icon-ngy2_external2"></i>',
  viewerInfo:                   '<i class="nGY2Icon icon-ngy2_info2"></i>',
  viewerShare:                  '<i class="nGY2Icon icon-ngy2_share2"></i>',
  user:                         '<i class="nGY2Icon icon-user"></i>',
  location:                     '<i class="nGY2Icon icon-location"></i>',
  config:                       '<i class="nGY2Icon icon-wrench"></i>',
  shareFacebook:                '<i style="color:#3b5998;" class="nGY2Icon icon-facebook-squared"></i>',
  shareTwitter:                 '<i style="color:#00aced;" class="nGY2Icon icon-twitter-squared"></i>',
  shareGooglePlus:              '<i style="color:#dd4b39;" class="nGY2Icon icon-gplus-squared"></i>',
  shareTumblr:                  '<i style="color:#32506d;" class="nGY2Icon icon-tumblr-squared"></i>',
  sharePinterest:               '<i style="color:#cb2027;" class="nGY2Icon icon-pinterest-squared"></i>',
  shareMail:                    '<i style="color:#555;" class="nGY2Icon icon-mail-alt"></i>',
  viewerCustomTool1:            'T1',
  viewerCustomTool2:            'T2',
  viewerCustomTool3:            'T3',
  viewerCustomTool4:            'T4',
  viewerCustomTool5:            'T5',
  viewerCustomTool6:            'T6',
  viewerCustomTool7:            'T7',
  viewerCustomTool8:            'T8',
  viewerCustomTool9:            'T9',
  viewerCustomTool10:           'T10'

7. API methods:

  • shoppingCartGet: Returns an array containing all the items in the shopping cart. One item content: idx=internal index, ID=your image ID, cnt=counter.
  • shoppingCartUpdate: Update the counter of one image in the shopping cart. Returns the shopping cart. Usage: $('#your_nanogallery2').nanogallery2('shoppingCartUpdate', imageID, newCounter); 1.0
  • shoppingCartRemove: Removes one image from the shopping cart. Returns the shopping cart. Usage: $('#your_nanogallery2').nanogallery2('shoppingCartRemove', imageID); 1.0
  • destroy: Removes the gallery.
  • displayItem: Displays an item (album or image).
  • reload: Reloads the current album.
  • option: Returns the value of an option.
  • new_value: Sets the value of an option (note: only some options are supported).
  • getItem: Returns one item (object) - can be one image or one album.
  • getItems: Returns an array with all the items (array of objects).
  • getItemsIndex: Returns an array containing the indexes of the items.
  • itemsSelectedGet: Returns an array with all the selected items (array of objects).
  • itemsSetSelectedValue: Sets/unsets selection value (true/false) of an array of items.
  • closeViewer:  Close the image viewer.
  • minimizeToolbar: Minimize image viewer toolbar.
  • maximizeToolbar: Maximize image viewer toolbar.

8. Evens:

  • pageChanged.nanogallery2: Fired on gallery pagination. 
  • galleryRenderStart.nanogallery2: The rendering of the gallery is started. 
  • galleryRenderEnd.nanogallery2: he galelry has been rendered. 
  • galleryObjectModelBuilt.nanogallery2 : The Gallery Object Model(GOM) has been populated with all the items. 
  • galleryLayoutApplied.nanogallery2: The layout has been applied to the gallery/thumbnails. 
  • galleryDisplayed.nanogallery2: The thumbnails have been displayed.
  • lightboxNextImage.nanogallery2: Lightbox - display next image. 
  • lightboxPreviousImage.nanogallery2: Lightbox - display previous image. 
  • lightboxImageDisplayed.nanogallery2: Lightbox - image displayed.
  • shoppingCartUpdated: Called when the shopping cart is updated (new item or item updated).

This awesome jQuery plugin is developed by nanostudio. For more Advanced Usages, please check the demo page or visit the official website.