Modern Photo/Video Gallery and Lightbox Plugin

nanogallery2 you must have a gallery and lightbox. The strengths of Nanoscale Photo Gallery 2 include rich UI interactions, multi-responsive layouts, swipe and zoom gestures, multi-level albums, an HTML page generator, and unlimited options.

Simple setup and use. Documentation includes tutorials, templates, and ready-to-use HTML pages.

Key options:

Supports Flickr and Google Photos.
It automatically creates a mini-grid layout on the web page.
Click on the thumbnail to view all images in a simplified popup.
The autoplay is supported.
Full-screen mode supported.
Tons of configuration options, API methods, and events.
Shareable and downloadable images.

How to make use of it:

Installation:

# NPM
npm install nanogallery2
# Bower
bower install nanogallery2

1. Load the next CSS & JavaScript information into your HTML doc.

<!-- 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 picture links into your webpage. You can specify the thumbnail pictures utilizing the data-ngThumb attribute 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 routinely, simply add the picture links to a DIV container with the data-nanogallery2 and we’re achieved:

<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 even initialize the gallery plugin and outline the picture listing by way of JavaScript like 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 attainable plugin choices & callback features may be handed by way of both JavaScript or HTML information attributes:

<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,
galleryResize :      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,
thumbnailDelay:         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',
viewer :                  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
fnInit :             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,
fnShoppingCartUpd :       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>   <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>',
  share:                '<i style="color:#3b5998;" class="nGY2Icon-facebook-squared"></i>',
  shareTwitter:                 '<i style="color:#00aced;" class="nGY2Icon--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'
}

Full-Featured Photo Gallery Plugin, nanogallery2 Plugin/Github, wp album gallery plugin with lightbox

See Demo And Download

Demo

Download

Official Website(nanostudio-org): Click Here

This superior jQuery/javascript plugin is developed by nanostudio-org. For extra Advanced Usage, please go to the official website.

Tags: flickr gallery lightbox gesture lightbox nanogallery2 online builder pinch to zoom responsive lightbox gallery swiper slider thumbnails

How to make use of it:

See Demo And Download

Share this:

You may also like...

A JQuery Plugin That Generates Random Colors For Elements On Page Load | youHue

Youtube Style Left Side Menu Effect With jQuery & CSS3

jQuery Plugin To Hide and Reveal Social Icons In A Circular Layout | socialCircle

Leave a Reply Cancel reply

Most Viewed

Popular Topics