Full Featured Photo Gallery Plugin For jQuery - nanoGallery 2

Full Featured Photo Gallery Plugin For jQuery - nanoGallery 2
File Size: 1.93 MB
Views Total: 16306
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.

Installation:

# NPM
npm install nanogallery2

# Bower
bower install nanogallery2

Basic usage:

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

<!-- Core Stylesheet -->
<link href="dist/css/nanogallery2.min.css" rel="stylesheet" />
<link href="dist/css/nanogallery2.woff.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- All In One JavaScript -->
<script src="dist/jquery.nanogallery2.min.js"></script>
<!-- Or Load Core JavaScript -->
<script src="dist/jquery.nanogallery2.core.min.js"></script>
<!-- And Optional Modules -->
<script src="dist/jquery.nanogallery2.data_flickr.min.js"></script>
<script src="dist/jquery.nanogallery2.data_google3.min.js"></script>
<script src="dist/jquery.nanogallery2.data_nano_photos_provider2.min.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 id="nanogallery2" data-nanogallery2='{OPTIONS HERE}' >
  <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>
  ...
</div>

4. You can also initialize the gallery plugin and define the image list via JavaScript as this:

<div id="nanogallery2">Loading...</div>
$("#nanogallery2").nanogallery2( {
  items: [
    { src: '1.jpg', srct: 'thumb-1.jpg', title: 'Alt 1' },
    { src: '2.jpg', srct: 'thumb-2.jpg', title: 'Alt 2' },
    { src: '3.jpg', srct: 'thumb-3.jpg', title: 'Alt 3' }
  ]
});

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

<div data-nanogallery2='{ OPTIONS }' ></div>
kind :                        '', // 'flickr', 'google2', 'nano_photos_provider2'
flickrAPIKey:                 '',
userID :                      '',
photoset :                    '',
album:                        '',
blockList :                   'scrapbook|profil|auto backup',
tagBlockList:                 '',
allowList :                   '',
albumList :                   '',
albumList2 :                  null,
RTL :                         false,
flickrSkipOriginal :          true,
breadcrumbAutoHideTopLevel :  true,
displayBreadcrumb :           true,
breadcrumbOnlyCurrentLevel :  true,
breadcrumbHideIcons :         true,
theme :                       'nGY2',
galleryTheme :                'dark', // or light
viewerTheme :                 'dark', // or 'light', 'border'
items :                       null,
itemsBaseURL :                '',
thumbnailSelectable :         false,
dataProvider:                 '',
allowHTMLinData:              false,
locationHash :                true,
slideshowDelay :              3000,
slideshowAutoStart :          false,
debugMode:                    false,
titleTranslationMap:          null,
galleryDisplayMoreStep :      2,
galleryDisplayMode :          'fullContent',
galleryL1DisplayMode :        null,
galleryPaginationMode :       'rectangles',   // 'dots', 'rectangles', 'numbers'
galleryPaginationTopButtons : true,
galleryMaxRows :              2,
galleryL1MaxRows :            null,
galleryLastRowFull:           false,
galleryL1LastRowFull:         null,
galleryLayoutEngine :         'default',
paginationSwipe:              true,
paginationVisiblePages :      10,
galleryFilterTags :           false,    // possible values: false, true, 'title', 'description'
galleryL1FilterTags :         null,     // possible values: false, true, 'title', 'description'
galleryFilterTagsMode :       'single',
galleryL1FilterTagsMode :     null,
galleryMaxItems :             0,        // maximum number of items per album  --> only flickr, google2, nano_photos_provider2
galleryL1MaxItems :           null,     // maximum number of items per gallery page --> only flickr, google2, nano_photos_provider2
gallerySorting :              '',
galleryL1Sorting :            null,
galleryDisplayTransition :    'none',
galleryL1DisplayTransition :  null,
galleryDisplayTransitionDuration :    1000,
galleryL1DisplayTransitionDuration :  null,
galleryResizeAnimation :      true,
galleryRenderDelay :          30,

thumbnailCrop :               true,
thumbnailL1Crop :             null,
thumbnailCropScaleFactor :    1.5,
thumbnailLevelUp :            false,
thumbnailAlignment :          'fillWidth',
thumbnailWidth :              300,
thumbnailL1Width :            null,
thumbnailHeight :             200,
thumbnailL1Height :           null,
thumbnailBaseGridHeight :     0,
thumbnailL1BaseGridHeight :   null,
thumbnailGutterWidth :        2,
thumbnailL1GutterWidth :      null,
thumbnailGutterHeight :       2,
thumbnailL1GutterHeight :     null,
thumbnailBorderVertical :     2,
thumbnailL1BorderVertical :   null,
thumbnailBorderHorizontal :   2,
thumbnailL1BorderHorizontal : null,
thumbnailFeaturedKeyword :    '*featured',
thumbnailAlbumDisplayImage :  false,
thumbnailHoverEffect2 :       'toolsAppear',
thumbnailBuildInit2 :         '',
thumbnailStacks :             0,
thumbnailL1Stacks :           null,
thumbnailStacksTranslateX :   0,
thumbnailL1StacksTranslateX : null,
thumbnailStacksTranslateY :   0,
thumbnailL1StacksTranslateY : null,
thumbnailStacksTranslateZ :   0,
thumbnailL1StacksTranslateZ : null,
thumbnailStacksRotateX :      0,
thumbnailL1StacksRotateX :    null,
thumbnailStacksRotateY :      0,
thumbnailL1StacksRotateY :    null,
thumbnailStacksRotateZ :      0,
thumbnailL1StacksRotateZ :    null,
thumbnailStacksScale :        0,
thumbnailL1StacksScale :      null,
thumbnailDisplayOutsideScreen: true,
thumbnailWaitImageLoaded:     true,
thumbnailSliderDelay:         2000,
galleryBuildInit2 :           '',
portable :                    false,
eventsDebounceDelay:          30,

touchAnimation :              false,
touchAnimationL1 :            undefined,
touchAutoOpenDelay :          0,

thumbnailLabel : {
  position :                  'overImage',
  align:                      'center',
  valign:                     'bottom',
  display :                   true,
  displayDescription :        false,
  titleMaxLength :            0,
  titleMultiLine :            false,
  descriptionMaxLength :      0,
  descriptionMultiLine :      false,
  hideIcons :                 true,
  title :                     ''
},

thumbnailToolbarImage :       { topLeft: 'select', topRight : 'featured' },
thumbnailToolbarAlbum :       { topLeft: 'select', topRight : 'counter'  },
thumbnailDisplayOrder :       '',
thumbnailL1DisplayOrder :     null,
thumbnailDisplayInterval :    15,
thumbnailL1DisplayInterval :  null,
thumbnailDisplayTransition :  'fadeIn',
thumbnailL1DisplayTransition : null,
thumbnailDisplayTransitionEasing :  'easeOutQuart',
thumbnailL1DisplayTransitionEasing : null,
thumbnailDisplayTransitionDuration:   240,
thumbnailL1DisplayTransitionDuration: null,
thumbnailOpenInLightox :      true,
thumbnailOpenOriginal :       false,

lightboxStandalone:           false,
viewer :                      'internal',
viewerFullscreen:             false,
imageTransition :             'swipe2',
viewerTransitionMediaKind :   'img',
viewerZoom :                  true,
viewerImageDisplay :          '',
openOnStart :                 '',
viewerHideToolsDelay :        4000,
viewerToolbar : {
  display :                   true,
  position :                  'bottom',
  fullWidth :                 false,
  align :                     'center',
  autoMinimize :              0,
  standard :                  'minimizeButton,label',
  minimized :                 'minimizeButton,label,infoButton,shareButton,fullscreenButton'
},
viewerTools : {
  topLeft :                   'pageCounter,playPauseButton',
  topRight :                  'rotateLeft,rotateRight,fullscreenButton,closeButton' 
},
viewerGallery:                'bottomOverMedia',
viewerGalleryTWidth:          40,
viewerGalleryTHeight:         40,

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

// callbacks
fnThumbnailInit :             null, ($thumbnail, item, GOMidx)
fnThumbnailHoverInit :        null, ($thumbnail, item, GOMidx)
fnThumbnailHover :            null, ($thumbnail, item, GOMidx)
fnThumbnailHoverOut :         null, ($thumbnail, item, GOMidx)
fnThumbnailDisplayEffect :    null, ($thumbnail, item, GOMidx)
fnViewerInfo :                null,
fnImgToolbarCustInit :        null, (customElemntName)
fnImgToolbarCustDisplay :     null, ($customToolbarElements, item)
fnImgToolbarCustClick :       null, (customElementName, $customIcon, item)
fnProcessData :               null, (item, kind, sourceData)
fnThumbnailSelection :        null,
fnGalleryRenderStart :        null, (album object)
fnGalleryRenderEnd :          null, (album object)
fnGalleryObjectModelBuilt :   null,
fnGalleryLayoutApplied :      null,
fnThumbnailClicked :          null,
fnShoppingCartUpdated :       null, (shoopingCart, item, source)
fnThumbnailToolCustAction :   null,
fnThumbnailOpen :             null, (items)
fnImgDisplayed :              null, (item)
fnPopupMediaInfo :            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 : {
  // example for font awesome: <i style="color:#eee;" class="fa fa-search-plus"></i>
  thumbnailAlbum:               '<i class="nGY2Icon-folder-empty"></i>',
  thumbnailImage:               '<i class="nGY2Icon-picture"></i>',
  breadcrumbAlbum:              '<i class="nGY2Icon-folder-empty"></i>',
  breadcrumbHome:               '<i class="nGY2Icon-home"></i>',
  breadcrumbSeparator:          '<i class="nGY2Icon-left-open"></i>',
  breadcrumbSeparatorRtl:       '<i class="nGY2Icon-right-open"></i>',
  navigationFilterSelected:     '<i style="color:#fff;" class="nGY2Icon-ok"></i>',
  navigationFilterUnselected:   '<i style="color:#ddd;opacity:0.3;" class="nGY2Icon-circle-empty"></i>',
  navigationFilterSelectedAll:  '<i class="nGY2Icon-ccw"></i>',
  navigationPaginationPrevious: '<i class="nGY2Icon-ngy2_chevron-left"></i>',
  navigationPaginationNext:     '<i class="nGY2Icon-ngy2_chevron-right"></i>',
  thumbnailSelected:            '<i style="color:#bff;" class="nGY2Icon-ok-circled"></i>',
  thumbnailUnselected:          '<i style="color:#bff;" class="nGY2Icon-circle-empty"></i>',
  thumbnailFeatured:            '<i style="color:#dd5;" class="nGY2Icon-star"></i>',
  thumbnailCounter:             '<i class="nGY2Icon-picture"></i>',
  thumbnailShare:               '<i class="nGY2Icon-ngy2_share2"></i>',
  thumbnailDownload:            '<i class="nGY2Icon-ngy2_download2"></i>',
  thumbnailInfo:                '<i class="nGY2Icon-ngy2_info2"></i>',
  thumbnailShoppingcart:        '<i class="nGY2Icon-basket"></i>',
  thumbnailDisplay:             '<i class="nGY2Icon-resize-full"></i>',
  thumbnailCustomTool1:         'T1',
  thumbnailCustomTool2:         'T2',
  thumbnailCustomTool3:         'T3',
  thumbnailCustomTool4:         'T4',
  thumbnailCustomTool5:         'T5',
  thumbnailCustomTool6:         'T6',
  thumbnailCustomTool7:         'T7',
  thumbnailCustomTool8:         'T8',
  thumbnailCustomTool9:         'T9',
  thumbnailCustomTool10:        'T10',
  thumbnailAlbumUp:             '<i style="font-size: 3em;" class="nGY2Icon-ngy2_chevron_up2"></i>',
  paginationNext:               '<i class="nGY2Icon-right-open"></i>',
  paginationPrevious:           '<i class="nGY2Icon-left-open"></i>',
  galleryMoreButton:            '<i class="nGY2Icon-picture"></i> &nbsp; <i class="nGY2Icon-right-open"></i>',
  buttonClose:                  '<i class="nGY2Icon-ngy2_close2"></i>',
  viewerPrevious:               '<i class="nGY2Icon-ngy2_chevron-left"></i>',
  viewerNext:                   '<i class="nGY2Icon-ngy2_chevron-right"></i>',
  viewerImgPrevious:            '<i class="nGY2Icon-ngy2_chevron_left3"></i>',
  viewerImgNext:                '<i class="nGY2Icon-ngy2_chevron_right3"></i>',
  viewerDownload:               '<i class="nGY2Icon-ngy2_download2"></i>',
  viewerToolbarMin:             '<i class="nGY2Icon-ellipsis-vert"></i>',
  viewerToolbarStd:             '<i class="nGY2Icon-menu"></i>',
  viewerPlay:                   '<i class="nGY2Icon-play"></i>',
  viewerPause:                  '<i class="nGY2Icon-pause"></i>',
  viewerFullscreenOn:           '<i class="nGY2Icon-resize-full"></i>',
  viewerFullscreenOff:          '<i class="nGY2Icon-resize-small"></i>',
  viewerZoomIn:                 '<i class="nGY2Icon-ngy2_zoom_in2"></i>',
  viewerZoomOut:                '<i class="nGY2Icon-ngy2_zoom_out2"></i>',
  viewerLinkOriginal:           '<i class="nGY2Icon-ngy2_external2"></i>',
  viewerInfo:                   '<i class="nGY2Icon-ngy2_info2"></i>',
  viewerShare:                  '<i class="nGY2Icon-ngy2_share2"></i>',
  viewerRotateLeft:             '<i class="nGY2Icon-ccw"></i>',
  viewerRotateRight:            '<i class="nGY2Icon-cw"></i>',
  viewerShoppingcart:           '<i class="nGY2Icon-basket"></i>',
  user:                         '<i class="nGY2Icon-user"></i>',
  location:                     '<i class="nGY2Icon-location"></i>',
  picture:                     '<i class="nGY2Icon-picture"></i>',
  config:                       '<i class="nGY2Icon-wrench"></i>',
  shareFacebook:                '<i style="color:#3b5998;" class="nGY2Icon-facebook-squared"></i>',
  shareTwitter:                 '<i style="color:#00aced;" class="nGY2Icon-twitter-squared"></i>',
  // shareGooglePlus:              '<i style="color:#dd4b39;" class="nGY2Icon-gplus-squared"></i>',
  shareTumblr:                  '<i style="color:#32506d;" class="nGY2Icon-tumblr-squared"></i>',
  sharePinterest:               '<i style="color:#cb2027;" class="nGY2Icon-pinterest-squared"></i>',
  shareVK:                      '<i style="color:#3b5998;" class="nGY2Icon-vkontakte"></i>',
  shareMail:                    '<i style="color:#555;" class="nGY2Icon-mail-alt"></i>',
  viewerCustomTool1:            'T1',
  viewerCustomTool2:            'T2',
  viewerCustomTool3:            'T3',
  viewerCustomTool4:            'T4',
  viewerCustomTool5:            'T5',
  viewerCustomTool6:            'T6',
  viewerCustomTool7:            'T7',
  viewerCustomTool8:            'T8',
  viewerCustomTool9:            'T9',
  viewerCustomTool10:           'T10'
}

6. 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.
  • 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.
  • resize: Resize the image viewer.
  • refresh: Refresh the image viewer.
  • search(string): Search an item.
  • search2(search_title, search_tags): Advanced search.
  • search2Execute: Execute the search on title and tags and filters the displayed thumbnails.
  • data: Return an object containing ITEMS, GALLERY, and Viewer.

7. 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).
  • itemSelected.nanogallery2: Called when one thumbnail has been selected.
  • itemUnSelected.nanogallery2: Called when one thumbnail has been un-selecetd.

Changelog:

v3.0.4 (2021-01-06)

  • fixed: Thumbnail for videos not working
  • fixed: JS requires CSP UNSAFE_EVAL
  • fixed: debugger; sentence uncommented stops web load
  • fixed: Lightbox standalone always opens first image, not clicked image
  • fixed: Thumbnails not showing for youtube vids
  • fixed: Thumbnails not showing up, but images are loaded
  • fixed: Video file extension is case sensitive
  • fixed: mixed line endings

v3.0.4 (2020-10-14)

  • bugfix

v3.0.3 (2020-09-09)

  • fixed module not found

v3.0.2 (2020-07-22)

  • new: [BREAKING CHANGE for FLICKR user] a custom Flickr API key is now required: To request one: https://www.flickr.com/services/apps/create/
  • new: data source, ignore markup elements which do not contain media data
  • fixed: lightbox does not free it's resources on close, in some case
  • fixed: lightbox previous media displayed over current media on startup
  • fixed: layout is not adjusted immediately anymore when resizing the browser window
  • fixed: self hosted video is not playing when clicked
  • fixed: value 'none' for option 'viewerGallery' not working
  • fixed: Vimeo videos no playing
  • changed: option 'galleryResizeAnimation' now set to false by default
  • minor bugfixes

v3.0.1 (2020-07-02)

  • fixed: Flickr connector
  • fixed: lightbox error when thumbnails are disabled
  • fixed: fullscreen mode remains activated when lightbox is closed after having been started in fullscreen mode
  • fixed: requestAnimationFrame not used in some cases
  • fixed: does not scroll to top of gallery when an album is opened
  • minor bugfixes
  • updated dist files

v3.0.0 (2020-06-20)

  • thumbnails on lightbox
  • mosaic layout is now fully responsive
  • options 'thumbnailGutterWidth' and 'thumbnailGutterHeight' are now responsive
  • filtering, option galleryFilterTagsMode/galleryL1FilterTagsMode - possible value 'single', 'multiple'
  • filtering, if no tag is selected then no filter is applied
  • loading spinner over thumbnail during album content download
  • first album level: new options thumbnailL1BorderHorizontal and thumbnailL1BorderVertical
  • gallery pagination: left/right buttons on top of the gallery (option 'galleryPaginationTopButtons')
  • lightbox: swipe up to close (additional to the existing swipe down gesture)
  • lightbox: button to add media to shopping cart
  • callback fnPopupMediaInfo(item, title, content) -> {title: my_title, content: my_content}
  • improved: swipe and touch gesture using velocity
  • rounded border on thumbnails (defined in 'galleryTheme')
  • improved: page scrollbar better removed on lightbox display, to avoid page reflow
  • randomized thumbnail display order: option 'thumbnailDisplayOrder' ('', 'random')
  • easing for thumbnail display animation: option 'thumbnailDisplayTransitionEasing' (default: easeOutQuart)
  • Google Photos: enable the use of filename as the title
  • Flickr: option tagBlockList to filter out images based on tags
  • media title renaming with option 'titleTranslationMap'
  • option 'blackList' renamed to 'blockList'
  • option 'whiteList' renamed to 'allowList'
  • lightbox toolbar: option viewerToolbar.display now set to false by default
  • shopping cart handling refactored
  • thumbnail label: new option 'valign' in addition to the 'position' option
  • gallery filtering: icon for tags and for tag's filter reset
  • lightbox tool: icons layout and background
  • hover animation on thumbnails are now disabled by default ('touchAnimation' default value changed to false)
  • option 'thumbnailOpenImage' renamed in 'thumbnailOpenInLightox'
  • callbacks fnGalleryRenderStart/fnGalleryRenderEnd: now return the album object instead of it's index
  • bugs fixed

v2.4.2 (2019-11-25)

  • new: self hosted videos - support for WEBM and OGV formats (dependant on browser support)
  • fixed: gallery not displayed under certain conditions
  • fixed: first html5 video unclickable
  • fixed: self hosted videos - support in html markup method
  • removed: share on google+

v2.4.1 (2019-03-14)

  • new: support for self hosted videos (mp4)
  • new: lightbox - button to rotate images
  • new: lightbox - fluid transition from zoomed to unzoomed image when displaying a new image
  • new: API shopping cart update event now returns also the concerned item
  • fixed: new data provider for the new Google Photos API
  • note: Google Photos - videos cannot be played in the lightbox (only download is available)
  • fixed: IE11: CSS can not be accessed
  • fixed: IE11: startsWith not defined
  • fixed: pagination - scroll to top of the gallery in mode pagination
  • fixed: image transition effect SWIPE
  • fixed: fullscreen issue in Chrome
  • enhancement: gallery display shaking when pagination activated on mobile device
  • enhancement: lightbox vertical pan handling
  • removed: option 'albumListHidden' depreciated

v2.3.0 (2018-09-27)

  • new: support for self hosted videos (mp4)

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