Responsive and Mobile-Friendly Image Gallery Plugin - nanoGALLERY

File Size: 958 KB
Views Total: 27281
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive and Mobile-Friendly Image Gallery Plugin - nanoGALLERY

jQuery nanoGALLERY is a jQuery plugin that integrates with fancybox plugin to create responsive and touch-friendly image galleries with lightbox and navigation support. The plugin can display also album and images stored in Flickr or Google+/Picasa. nanoGALLERY is licensed under CC BY-NC 3.0.

How to use it:

1. Include jQuery javascript library in the header of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2. Include jQuery nanoGALLERY plugin on the page, after jQuery

<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.js"></script>

3. Include jQuery fancybox plugin for lightbox and navigation (OPTIONAL)

<link href="third.party/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="third.party/fancybox/jquery.fancybox.pack.js"></script>
<link href="third.party/fancybox/helpers/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="third.party/fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="third.party/fancybox/helpers/jquery.fancybox-media.js"></script>

4. Create a container for the gallery

<div id="nanoGallery1"></div>

5. Initialize the plugin with all the default options. Check the document for full options.

  • userID : '': [email protected]'
  • kind : ''
  • album : ''
  • photoset : ''
  • blackList : 'scrapbook|profil'
  • whiteList : ''
  • albumList : ''
  • flickrSkipOriginal : true: do not display the original uploaded image (e.g. to avoid rotation issue)
  • galleryToolbarWidthAligned : true: Toolbar is automatically resized to the width of the thumbnails area.
  • galleryToolbarHideIcons : false: Hide icons in toolbar (breadcrumb)
  • galleryFullpageButton : false: button to display the gallery in fullpage  
  • galleryFullpageBgColor : '#111': background color when the gallery is displayed in fullpage 
  • breadcrumbAutoHideTopLevel : false: The breadcrumb is hidden when on top navigation level.
  • displayBreadcrumb : false
  • theme : 'default': Name of the theme. Possible values: 'default', 'clean', 'light' or your custom one.
  • colorScheme : 'none': Gallery color scheme (breadcrumb and thumbnails). Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light', 'lightBackground' .Custom color schemes are supported.
  • colorSchemeViewer : 'default': Image viewer color scheme. Possible values: 'none', 'dark', 'darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light'.Custom color schemes are supported.
  • items : null
  • itemsBaseURL : ''
  • itemsSelectable : false: Enables thumbnail selection (CTRL+click, or long touch).
  • showCheckboxes: true: Displays a checkbox over selected thumbnails.
  • checkboxStyle : 'left:15px; top:15px;': Inline style for selection checkbox.
  • jsonCharset: 'Latin': Sets the string charset for json data. Possible values: 'Latin', 'UTF-8'
  • jsonProvider: '': URL to the nanoPhotosProvider.php file.
  • paginationMaxLinesPerPage : 0: Maximum number of thumbnail lines per page (will activate pagination).
  • paginationDots : false: Displays dots for thumbnail pagination instead of page numbers
  • maxWidth : 0: Maximum width of the gallery in pixels. 0 = disabled.
  • viewer : 'internal': Image display method. Possible values: 'internal', 'fancybox'
  • viewerFullscreen: false: displays images in fullscreen (on supported browser).
  • viewerDisplayLogo : false: Display one logo over images (defined in CSS file).
  • imageTransition : 'default'
  • viewerToolbar : { display:true, position : 'bottom', style : 'innerImage', autoMinimize:800, standard:'minimizeButton , previousButton, pageCounter ,nextButton,playPauseButton,fullscreenButton,infoButton,linkOriginalButton,closeButton,label', minimized:'minimizeButton,label' }: Display options for the viewer toolbar (navigation buttons and captions)
  • thumbnailAlignment : 'center': set the thumbnail alignment. Possible values: `left`, `right`, `justified`, `center`  
  • thumbnailWidth : 230
  • thumbnailHeight : 154
  • thumbnailGutterWidth : 2: set the horizontal gutter space between thumbnails
  • thumbnailGutterHeight : 2: set the vertical gutter space between thumbnails
  • thumbnailAdjustLastRowHeight : true: Automatically lower the last row height to avoid layout breaks
  • thumbnailFeatured : false
  • thumbnailHoverEffect : null: new hover effects `descriptionAppear`, `imageScaleIn80`
  • thumbnailLabel : {position : 'overImageOnBottom', display : true, displayDescription : true, titleMaxLength : 0, descriptionMaxLength : 0, hideIcons : false, title : '', itemsCount : ''}
  • thumbnailDisplayInterval : 30: Interval in ms between the display of the thumbnails.
  • thumbnailDisplayTransition : true: Transition animation used to display each thumbnail.
  • thumbnailLazyLoad : false: Lazy load of thumbnails image
  • thumbnailLazyLoadTreshold : 100: Extend the viewport area (in pixel) for thumbnails image lazy load.
  • thumbnailGlobalImageTitle : ''
  • thumbnailGlobalAlbumTitle : ''
  • supportIE8: true: enable IE8 support.
  • level1 : { thumbnailWidth: 0, thumbnailHeight: 0, thumbnailGutterWidth: 0, thumbnailGutterHeight: 0, thumbnailAlignment: 0, thumbnailHoverEffect: '', thumbnailLabel: null, touchAutoOpenDelay: false }
  • lores : {}
  • loresWidth : 500
  • hires : {}
  • hiresWidth : 1200
  • fnThumbnailInit : null: Called once after one thumbnail's build. Called for each thumbnail.
  • fnThumbnailHoverInit : null: Called once to initialize the thumbnail hover effect. Called for each thumbnail.
  • fnThumbnailHoverResize : null: Called when the gallery is resized. Called for each thumbnail.
  • fnThumbnailHover : null: Called on thumbnail hover.
  • fnThumbnailHoverOut : null: Called on thumbnail hover out.
  • fnThumbnailDisplayEffect : null: Called to display one thumbnail.
  • fnViewerInfo : null: If defined, it will add an info button to the image viewer toolbar.
  • fnProcessData : null: Used to extend data associated to thumbnails/images.
  • touchAnimation : true: Enable thumbnail hover animation on touch event
  • touchAutoOpenDelay : 0: delay in ms before opening the touched thumbnail. Particular values: `-1`=disabled, `0`=automatic.
  • useTags : false
  • preset : 'none'
  • locationHash : false: Browser Back/Forward navigation and Deep Linking of images and photo albums.
  • slideshowDelay : 3000: Photo autoplay speed in milliseconds (slideshow)
  • slideshowAutoStart : false: start automatically the slideshow when an image is displayed
  • photoSorting : '': new possible values `titleAsc`, `titleDesc`, `randomN` (N=integer representing the maximum number of items to display)
  • albumSorting : ''
  • dataSorting : '':  Items sort order (only markup and API method). Possible values: `standard`, `reversed`, `random`
  • lazyBuild : 'none': display the gallery only when visible (= in the viewport). Possible values: 'loadData', 'display', 'none'
  • lazyBuildTreshold : 150: Shorten the viewport area height (in pixel) for lazyBuild.
  • imageTransition : 'slide': image swipe animation. Possible values: slideAppear, swipe. Swipe is optimized for modern browser but is supported by older ones also.
  • viewerToolbar : {position : 'bottom', style : 'innerImage', autoMinimize:800}: new option autoMinimize (integer; Default: 800) to define a breakpoint for switching between minimized and standard toolbar. If the width is lower than this value, the toolbar is switched to minimized.
  • thumbnailWidth : 230: additional syntax to define sizes dependant of the screen resolution. Syntax:'defaultValue XSn1 SMn2 MEn3 LAn4 XLn5' where n1 to n5 are the values for resolutions XS to XL. Syntax is case sensitive.
  • thumbnailHeight : 154: Examples: '200 XS80 SM150 LA250 XL400' / '200 XSauto SMauto LA250 XL400'. Picasa/Google+: thumbnails can be cropped (square) or not. To get the cropped thumbnail, add C after the size. Example: '200C XS80C SM150C LA250 XL400'.
  • thumbnailSizeSM : 480: screen width breakpoint for thumbnail size SM.
  • thumbnailSizeME : 992: screen width breakpoint for thumbnail size ME.
  • thumbnailSizeLA : 1200: screen width breakpoint for thumbnail size LA.
  • thumbnailSizeXL : 1800: screen width breakpoint for thumbnail size XL.
  • RTL: false: display direction from right to left.
  • fancyBoxOptions: null: options for fancyBox. 
  • fnImgToolbarCustInit: null: called once on toolbar building to define the specified custom element.
  • fnImgToolbarCustDisplay: null: called on each image display.
  • fnImgToolbarCustClick: null: fired on click event on one image toolbar custom element.
  • fnInitGallery : null: called after each gallery construction.
  • fnChangeSelectMode(currSelectionMode): called when entering or leaving selection mode.
  • openOnStart : '': opens an album or an image at start. Syntax: albumID or albumID/imageID.
  • thumbnailAlbumDisplayImage : false: on album's thumbnail click, displays the images instead of the thumbnails of the album's content.
  • albumMax : 0: Maximum number of albums to display (Flickr, Picasa/Google+, nanoPhotosProvider) (0=disabled).
  • galleryEnableKeyboard : false: Enables keyboard navigation beween albums.
  • albumMax: 0: Maximum number of albums to display (Flickr, Picasa/Google+, nanoPhotosProvider) (0=disabled).
  • galleryEnableKeyboard: false: Enables keyboard navigation beween albums. ESC: display first level.Up, Right, PageUp: Display next album. Down, Left, PageDown: Display previous album.
  • paginationVisiblePages: 10: thumbnail pagination - maximum visible pages.

6. Public methods.

// removes the gallery
$('#yourElement').nanoGallery('destroy');

// displays an item (album or image).
$('#yourElement').nanoGallery('displayItem', 'itemID');

// reloads the current album.
$('#yourElement').nanoGallery('reload'); 

// returns the value of an option.
$('#yourElement').nanoGallery('option', option_name);

// sets the value of an option (note: only some options are supported).
$('#yourElement').nanoGallery('option', option_name, new_value);

// returns one item (object).
$('#yourElement').nanoGallery('getItem', item_index);

// returns every items (array of objects).
$('#yourElement').nanoGallery('getItems');

// returns the indexes of some items (array).
$('#yourElement').nanoGallery('getItemsIndex', [item1, item2, item3, ...]);

// is the gallery in selection mode.
$('#yourElement').nanoGallery('getSelectMode');

// enter/leave the selection mode, and set the kind.
$('#yourElement').nanoGallery('setSelectMode', true|false|'album'|'image');

// returns the current selected items (array).
$('#yourElement').nanoGallery('getSelectedItems');

// selects some items (array).
$('#yourElement').nanoGallery('selectItems', [item1, item2, item3, ...]);

// unselects some items (array).
$('#yourElement').nanoGallery('unselectItems', [item1, item2, item3, ...]); 

// close the image viewer.
$('#yourElement').nanoGallery('closeViewer');

// go to previous gallery page (when in pagination mode).
$('#yourElement').nanoGallery('paginationPreviousPage');

// go to next gallery page (when in pagination mode).
$('#yourElement').nanoGallery('paginationNextPage');

// returns the number of gallery pages (when in pagination mode).
var countPages = $('#yourElement').nanoGallery('paginationCountPages');

// go to a specific gallery page (when in pagination mode).
$('#yourElement').nanoGallery('paginationGotoPage', pageNumber);

// get the currently viewed item. 
// Returns null if viewer not displayed. 
var item=$('#yourElement').nanoGallery('getCurrentViewedItem');

// get the index of the currently viewed image. 
// Returns -1 if viewer not displayed. 
var itemIdx=$('#yourElement').nanoGallery('getCurrentViewedItemIdx');

// Force a gallery resize.
// When the gallery container is hidden and is set to visible at a later time, this method will avoid incorrect thumbnail position.$('#yourElement').nanoGallery('refreshSize');

// minimize image viewer toolbar.
$('#yourElement').nanoGallery('minimizeToolbar');

// maximizeToolbar: maximize image viewer toolbar.
$('#yourElement').nanoGallery('maximizeToolbar');

// Returns the number of images in the current displayed album.
$('#yourElement').nanoGallery('galleryCountImages');

// Display next gallery album.
$('#yourElement').nanoGallery('moveToNextAlbum');

// moveToPreviousAlbum: Display previous gallery album.
$('#yourElement').nanoGallery('moveToPreviousAlbum');

// Force a gallery resize.
// When the gallery container is hidden and is set to visible at a later time, this method will avoid incorrect thumbnail position.
$('#yourElement').nanoGallery('refreshSize');

// minimize image viewer toolbar.
$('#yourElement').nanoGallery('minimizeToolbar');

// maximize image viewer toolbar.
$('#yourElement').nanoGallery('maximizeToolbar');

// Returns the number of images in the current displayed album.
$('#yourElement').nanoGallery('galleryCountImages');

// Display next gallery album.
$('#yourElement').nanoGallery('moveToNextAlbum');

// Display previous gallery album.
$('#yourElement').nanoGallery('moveToPreviousAlbum');

Change Logs:

v5.10.3 (2016-07-01)

  • nanoPhotosProvider : underscores are replaced with spaces in title an description
  • nanoPhotosProvider : remove leading @@NNNN in title

v5.10.2 (2016-06-02)

  • bugfix iPhone issue - version detection error

v5.10.1 (2016-05-21)

  • embeded script imagesLoaded: new version v4.1.0 included
  • bugfix: Images sometimes fail to load after upon folder navigation in Safari
  • bugfix in the handling of multi resolution thumbnail images

v5.10.0 (2015-11-19)

  • New option paginationVisiblePages: thumbnail pagination - maximum visible pages. 
  • content source nanoPhotosProvider now supports options albumList, whiteList, blackList, album

v5.9.0 (2015-11-19)

  • New options: albumMax and galleryEnableKeyboard
  • New API methods: refreshSize, minimizeToolbar, maximizeToolbar, galleryCountImages, moveToNextAlbum and moveToPreviousAlbum
  • Bugs fixed

v5.8.0 (2015-10-26)

  • Added new options and methods.
  • Bugfixes.

v5.8.0 (2015-09-09)

  • Addes several new API methods.
  • Picasa/Google+: now supports more than 1.000 images per album.
  • bugfix: hover animations becoming choppy after navigating fastly in images.
  • bugfix: loading CSS animation consuming memory even if not visible.
  • bugfix: NGTweenable undefined when loading in a page using AMD and requirejs

v5.7.0 (2015-06-02)

  • New callback fnThumbnailOpen: called after a thumbnail is clicked/touched to display the image. Can be used to replace the standard viewer/lightbox with an external lightbox.
  • New option thumbnailOpenImage: enable the viewer/lightbox to display images after a thumbnail is clicked/touched.
  • New option paginationSwipe: on the gallery, enable swipe to go to next/previous page.
  • included new version of Shifty
  • disabled AMD

v5.6.0 (2015-04-16)

  • New API method setSelectMode: Enter/leave the selection mode, and set the kind. Possible values: true, false or can be a single kind : 'album' or 'image'.
  • New option keepSelection: do not lose selection on navigation.
  • changed the touch swipe sensibility on gallery

v5.5.4 (2015-03-24)

  • New API method. displayItem: display an item (album or image).

v5.5.3 (2015-03-21)

  • bugfix - Flickr image size L (1024 pixels) ignored

v5.5.2 (2015-03-20)

  • New features: Display directly an album or an image on plugin start
  • New features: Display the images instead of the thumbnails of the album's content
  • New options: openOnStart: opens an album or an image at start. Syntax: albumID or albumID/imageID.
  • New options: thumbnailAlbumDisplayImage: on album's thumbnail click, displays the images instead of the thumbnails of the album's content.
  • bugfix scrollbar not displayed in gallery fullpage mode for thumbnail effects scale120, imageScale150Outside, overScaleOutside, imageFlipHorizontal, imageFlipVertical
  • bugfix lazy load not working in gallery fullpage mode
  • bugfix thumbnail effects borderLighter and borderDarker not working on Firefox

v5.5.1 (2015-03-07)

  • bugfix thumbnail effects 'labelAppear' and 'labelAppear75' crashing on some browser

v5.5.0 (2015-03-07)

  • New Feature: Gallery rendering: significant performance improvements
  • New Feature: Thumbnail selection on long touch
  • Added more options, callbacks and methods.
  • bugfix location hash not working on web page with frames (SecurityError: Blocked a frame with origin)
  • bugfix deeplinking to image didn't display the gallery on close
  • bugfix fullscreen mode not correctly disabled after closing an image with ESC key
  • minor bugfixes

v5.4.0 (2015-02-03)

  • Pagination with dots (additionally to page numbers)
  • Settings specific to first navigation level: extended to thumbnailL1Label (#53), thumbnailL1HoverEffect , touchAnimationL1
  • Responsive image sizes now supported by API and inline methods
  • Better support of custom HTML elements in thumbnails
  • Selectable thumbnails
  • New API methods (beta)
  • Option locationHash: default value changed from false to true
  • Some code redesign
  • bugfix: click/touch handling on custom HTML elements on thumbnails (specify class 'customEventHandler' to force custom click/touch event handling)
  • bugfix: cascading layout/thumbnails invisible in some cases
  • New Options.

v5.3.0 (2015-01-13)

  • Added PHP extension to publish dynamically self-hosted pictures to the gallery.
  • New option: kind - new possible value json for self-hosted photos (see https://github.com/Kris-B/nanoPhotosProvider)
  • New option: jsonProvider: - set URL to the nanoPhotosProvider extension (see https://github.com/Kris-B/nanoPhotosProvider)
  • string; Default: ''
  • New option: jsonCharset - set the string charset for json data. Possible values: Latin, UTF-8

v5.2.3 (2014-11-18)

  • Added new opiton picasaUseUrlCrossDomain: access Picasa/Google+ using the cross domain URL instead of the standard one. boolean; Default: true
  • Added new opiton supportIE8: enable IE8 support. boolean; Default: true
  • bugfix (Chrome browser) scrollbar not enabled back after closing an image displayed in fullscreen
  • bugfix hover out thumbnail animation not triggered
  • bugfix image URL with spaces not supported
  • bugfix imageTransition:'fade' not working
  • bugfix pagination issue when only used on second level

v5.2.2 (2014-10-22)

  • bugfix thumbnails not displayed when thumbnailWidth='auto' and gallery is outside the viewport
  • bugfix scrollbar not enabled back after closing image in some cases
  • bugfix image toolbar - info button not displayed when fnViewerInfo defined
  • bugfix incorrect image position after swipe when imageTransition='slideAppear'

v5.2.1 (2014-10-22)

  • support right-to-Left display direction (RTL)
  • customize image toolbar (content and order)
  • added partial support for IE8 (update warning displayed on IE7/6)
  • direct link to the Flickr/Google+ image page
  • fancyBox custom settings
  • CSS files: additional versions with embedded WOFF icons font (to avoid same origin policy issues)
  • mage default swipe animation now with requestAnimationFrame
  • changed image counter layout on album thumbnail
  • added a workaround on jQuery JSONP error handling
  • devicePixelRatio now used to determine the size of the image to display (Flickr/Picasa)
  • bugfix label on bottom not displayed in grid layout
  • bugfix breadcrumb broken on navigation level 3
  • bugfix refresh issue in gallery rendering with webkit browser
  • bugfix API options imgtHeight/imgtWidth ignored
  • bugfix #51 - gallery not working after scrolling in mobile phones / swipe issue
  • bugfix sort option titleAsc/titleDesc based on original filename (Picasa/Google+)
  • bugfix scrollbar lost after using fullscreen mode on OS X Maverick
  • bugfix no thumbnail displayed because of conflict between thumbnailHoverEffect and thumbnailLabel.display=false
  • added new options.

v5.1.1 (2014-09-20)

  • embeded imagesLoaded.js updated to v3.1.8
  • bugfix thumbnail images not loading when thumbnailHoverEffect='scale120'
  • bugfix Picasa/Google+ wrong thumbnail image URL on albums
  • bugfix on Firefox with thumbnail lazy load: Picasa/Google+ wrong thumbnail image size on albums

v5.1.0 (2014-09-17)

  • possibility to define the image swipe animation. Default (swipe) is optimized for modern browser but is supported by older ones also.
  • image toolbar now in 2 sizes: minimized and standard. Minimized is used on small screens.
  • define different thumbnail size dependant on the screen resolution (note: the syntax has evolved since beta).
  • cleanup of the delivery package. Only jQuery still integrated.
  • removed thumbnails loading gif.
  • bugfix parameter breadcrumbAutoHideTopLevel not showing breadcrumb at all in some cases.
  • bugfix script errors in requirejs app (thanks to @jefftmills).
  • bugfix pagination container not hidden if not used (thanks to @grief-of-these-days).
  • bugfix thumbnailWidth='auto' image does not fill 100% of the thumbnail area.
  • added more useful options.

v5.0.3 (2014-08-27)

  • Google+ and Picasa galleries not loading since 08-25-2014. Google has changed the MIME TYPE for JSONP preventing nanoGALLERY from executing. Issue fixed by switching the Google+/Picasa requests to HTTPS.
  • WARNING: v5.0.x is the last version supporting SmugMug storage. This support will be removed by lack of users and because the SmugMug API is not very smart.

v5.0.2 (2014-08-13)

  • New feature imageTransition: image swipe animation. Possible values: slideAppear, swipe. Swipe is optimized for modern browser but is supported by older ones also.
  • Fixed issue with colorScheme and thumbnail hover effects labelAppear and labelAppear75
  • Added none to the supported values of thumbnailHoverEffect
  • Parameter albumList now supports album IDs as well as album names
  • WARNING: v5.0.x is the last version supporting SmugMug storage. This support will be removed by lack of users and because the SmugMug API is not very smart.

v5.0.1 (2014-08-07)

  • thumbnail sizes can be configured according to different screen resolutions (Flickr/Picasa/Google+)
  • fixed thumbnail hover animation issue on grid layout
  • fixed issue on 'randomN' (parameters: albumSorting and photoSorting)
  • fixed incompatibility issue on Safari Mobile before v6.0
  • fixed touch twice issue on thumbnail (touchAutoOpenDelay=-1)
  • fixed swip up/down on image display
  • fixed incompatibility issue between transit.js plugin detection and Bootstrap
  • pagination: scroll to gallery top if top is out of the viewport
  • breadcrumb label 'List of Albums' renamed 'Galleries'
  • this is the last version supporting SmugMug storage. This support will be removed by lack of users and because the SmugMug API is not very smart.

v5.0.0 (2014-07-29)

  • new gallery layout engine
  • gallery alignment (left, right, center, justified)
  • gutter space between thumbnails
  • highly improved thumbnail hover effects (better combinations and now layout style regardless)
  • removed the dependency to transit.js (no more required)
  • removed support of hammer.js
  • display full flickr photostream (set photoset='none', limited to 500 photos)
  • new option to automatically start the slideshow
  • new gallery fullpage mode
  • new thumbnail hover effects
  • sort content on title (Flickr, Picasa, Google+, SmugMug)
  • thumbnail hover effects
  • new loading animation (now even if breadcrumb is not visible)
  • touch-devices improvementfixed broken image icon on some browser
  • fixed some bugs in themes clean and light
  • added management of browser prefix for a better browser support even with odler jQuery versions
  • some css optimization
  • many code refactoring
  • minor bugfixes
  • new embedded font version with additional icons (nano_icon_font3)
  • imagesloaded is now embedded to avoid conflict with other version
  • new javascript helpers (fnViewerInfo, fnProcessData, fnThumbnailHoverResize)
  • possibility to define thumbnail images real size (inline and API methods)
  • better IE9 support
  • fixed broken image icon on some browser
  • fixed some bugs in themes clean and light
  • added management of browser prefix for a better browser support even with odler jQuery versions
  • some css optimization
  • many code refactoring
  • minor bugfixes
  • add more options

v4.4.2 (2014-06-05)

  • added native swipe support (hammer.js no more needed but still used if present)
  • Added new option viewerScrollBarHidden: hide the viewer scrollbars boolean; Default: true
  • enhanced Picasa / Google+ filename decode
  • minor bugfixes

v4.4.1 (2014-05-02)

  • Flickr images now only over HTTPS (Flickr is going SSL-Only on June 27th, 2014)
  • lazy gallery building
  • use image filename as image title
  • Flickr: new algorithm to retrieve the best image size depending on the screen resolution
  • Flickr: do not display the original uploaded image (e.g. to avoid rotation issue)
  • lazyBuild: display the gallery only when visible (possible values: 'loadData', 'display', 'none') string; Default: display
  • lazyBuildTreshold: Shorten the viewport area height (in pixel) for lazyBuild integer; Default: 150
  • thumbnailLabel.title: variable to set the image title (undescores are replaced by spaces). Possible values: '%filename', '%filemaneNoExt' string; default:''
  • **thumbnailLabel.itemsCount: add the number of items in one per photo album (possible values: 'none', 'title', 'description') string; Default: none
  • flickrSkipOriginal: do not display the original uploaded image (e.g. to avoid rotation issue) boolean; default:true
  • flickrSizeB: no longer needed / new algorithm implemented
  • improved Firefox for Android support
  • removed demo panel from main plugin file (now available in jquery.nanogallerydemo.js)
  • fixed on location hash not refreshed by breadcrumb
  • fixed bug on Flickr album sorting (thanks to Mark Koh)
  • fixed bug in fnThumbnailInit() call (thanks to Houlala - https://github.com/Houlala)
  • minor bugfixes

v4.4.0 (2014-05-02)

  • SmugMug storage support
  • new thumbnail display mode justified
  • helpers to extend the capabilities of nanoGALLERY
  • added image microdata
  • refinement of demonstration panel
  • removed support of browser-back to close the photo viewer
  • added HTTPS support
  • error messages displayed beneath the gallery (alert() was used up to now)
  • restored icons in the light theme (hidding icons is now configurable)

v4.3.0 (2014-04-03)

  • new image display possibilities giving a larger area to the images (customizable position of navigation buttons and labels)
  • set the maximum length of title and description to avoid too long content
  • display or hide the icons of the thumbnails label and/or navigation breadcrumb
  • breadcrumb: new icon for home folder
  • sorting of photos and of albums
  • preload also previous image
  • added Text-Shadow attribute to color schemes
  • refinement of the 'light' theme
  • new thumbnail hover effects
  • added support of Picasa/Google+ albums that are limited to people who have a link with an authkey

v4.2.1 (2014-03-07)

  • Added: global photo/album title and description
  • Added: new label position overImageOnMiddle
  • Added: new theme light (optimized for light backgrounds)
  • Option Added: i18n: new elements thumbnailImageTitle thumbnailAlbumTitle thumbnailImageDescription thumbnailAlbumDescription
  • Option Added: thumbnailLabel: new possible value `{position:'overImageOnMiddle'}
  • Bug Fixed: bug mouse click outside gallery not working

v4.2.0 (2014-03-04)

  • display current image number and total count of images
  • close button in upper right corner
  • use responsive image resolution with Flickr/Picasa/Google+ (small images on lowres display)
  • back/forward navigation
  • deep linking of images and albums
  • thumbnail height auto: fill the thumbnail with the entire image (no black space)
  • UI is no more freezed during thumbnails rendering
  • removed hover delay on thumbnail (animation starts immediately on mouse hiver now)
  • removed tags parameter in Flickr API requests
  • changed default color scheme from 'default' to 'none'
  • optimized image display
  • fixed fancybox-related code (thanks to grief-of-these-days - https://github.com/grief-of-these-days)
  • minor bugfixes

v4.1.0 (2014-01-20)

  • gesture support
  • optimized support of large galleries (thumbnail image lazy loading or pagination)
  • support browser back-button to close the lightbox
  • albums content is now cached avoiding reloads
  • slideshow mode
  • keyboard shortcuts
  • i18n support in gallery content (titles and descriptions) and in UI For a full feature list look at the release note., add files font-face, less folder, images, jquery.min and gitignore files

v4.0.3 (2013-12-03)

  • bugfix

v4.0.2 (2013-11-28)

  • updated to the latest version.

v4.0.0 (2013-11-20)

  • parameter to set the thumbnails animated hover effects (combinations possible)
  • color schemes to avoid having to edit any CSS file
  • display images faster (thanks to pre-loading)
  • icons now font-based for a better hires (Retina) display

v3.3.0 (2013-09-26)

  • Features and demos update

v3.2.6 (2013-09-03)

  • Features and demos update

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