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