nanoGALLERY  v5.2.2 / 28 Oct 2014





image gallery simplified

 

nanoGALLERY is a touch enabled and fully responsive image gallery with justified, cascading and grid layout.
It supports self hosted images and pulling in Flickr, Picasa and Google+ photo albums.

 



 

 

 

 

 

 













nanoGALLERY in action

Managing your photo galleries has never been so simple.









Image Gallery

Plugin for jQuery.
Display thumbnails with title and description.
Justified, cascading and grid layout.
Responsive thumbnail sizes - set screen resolution dependant sizes.
Images are displayed in full view via a modal popup window.
Easy and highly customizable.
Support self-hosted images as well as online photo sharing website.

Flickr, Picasa, Google+

Any photo published to your online photo sharing site (e.g. from your mobile phone) is automatically added to your website.
Display galleries on your website with your custom design.
Automatic thumbnail generation in different resolutions.
Huge bandwidth saving and fast photo downloading (photos are not store on your website).

Mobile Friendly

Touchscreen enabled and responsive.
Pagination and images support swipe gesture.
Galleries and photos are automatically resized.
Download small images on small display to save bandwidth (with Flickr, Picasa and Google+ storage).


Hover Effects

Spice up your Portfolio with eye-catching hover effects.
Effects can be combined for more possibilities.
2D/3D effects available.
Build your own custom effects.
Touchscreen friendly.


Sub Galleries

Support multi-level navigation.
Organize your images in albums.
Breadcrumb to navigate in photo albums.
Unlimited number of sub-levels.
Support deep linking to albums.

And more...

Support browser BACK/FORWARD navigation. Can be controlled using mouse, keyboard or touchscreen.
Color schemes to change layout without editing any CCS file.
RTL (Right To Left) display.
Thumbnails can redirect to an URL instead of an image.
Customizable image toolbar.
Front-end Frameworks: successfully tested with Boostrap, Foundation and Gumby.
Slideshow, fullscreen, pagination, content lazy load, image lazy load, themes, deep linking, data caching, image pre-loading, i18n...



















made with nanoGALLERY











Select demonstration:










nanoGALLERY Auto display breadcrumb for navigation


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID: '111186676244625461692',
      thumbnailWidth: 190, thumbnailHeight: 126,
      breadcrumbAutoHideTopLevel: true,
      maxWidth: 948,
      thumbnailHoverEffect: [{ name: 'slideRight', duration:500 }, { name: 'labelAppear75' }],
      theme: 'clean',
      i18n: { thumbnailImageDescription: 'View Photo', thumbnailAlbumDescription: 'Open Album' },
      thumbnailLabel: { display: true, position: 'overImageOnMiddle', hideIcons: true, align: 'center' }
      });
  });
  
×

nanoGALLERY Cascading grid layout


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      thumbnailWidth: 160,
      thumbnailHeight: 'auto',
      thumbnailGutterWidth: 10,
      thumbnailGutterHeight: 10,
      kind: 'picasa',
      userID: '111186676244625461692',
      album: '5911347863561293937',
      maxItemsPerLine: 4,
      thumbnailLabel:{ display: true, position: 'onBottom', titleMaxLength: 20, align: 'center'},
      theme: 'light',
      touchAnimation: false
    });
  });
  
×

nanoGALLERY Pagination 1 row


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID: '111186676244625461692',
      album: '5911347863561293937',
      thumbnailWidth: 165,
      thumbnailHeight: 110,
      thumbnailHoverEffect: 'labelSlideUp,borderLighter',
      paginationMaxLinesPerPage: 1,
      thumbnailLabel: {display: true, align: 'center'},
      theme: 'clean',
      i18n: { thumbnailImageDescription: 'view photo', thumbnailAlbumDescription: 'open album' }
    });
  });
  
×

nanoGALLERY Justified layout


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      thumbnailWidth: 'auto',
      thumbnailHeight: 250,
      userID: '111186676244625461692', kind:'picasa',
      album: '5911347863561293937',
      colorScheme: 'none',
      thumbnailHoverEffect: [{ name: 'labelAppear75', duration: 300 }],
      theme: 'light',
      thumbnailGutterWidth : 0,
      thumbnailGutterHeight : 0,
      i18n: { thumbnailImageDescription: 'View Photo', thumbnailAlbumDescription: 'Open Album' },
      thumbnailLabel: { display: true, position: 'overImageOnMiddle', align: 'center' }
    });
  });
  
×

nanoGALLERY - Full Flickr Photostream


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      userID: '34858669@N00',
      kind: 'flickr',
      photoset: 'none',

      thumbnailWidth: 120, thumbnailHeight: 120,
      thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
      theme: 'light',
      thumbnailLabel: { display:true, position:'overImageOnMiddle', align:'center' },
      thumbnailLazyLoad: true
    });
  });
  
×

nanoGALLERY - Custom Icons

This example shows you how to use icons from Font Awesome.

The breadcrumd home icon is replaced by a camera icon. It's defined twice: one is used by default (breadcrumbHome) and the other one is used on devices in french (breadcrumbHome_FR).

A search icon is displayed in the thumbnail description.

This shows you also how to change the label 'List of Albums' (parameter 'breadcrumbHome').

For this example, you also need to include Font Awesome in the HEAD of your page.


  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      thumbnailWidth: 120, thumbnailHeight: 120,
      userID: '111186676244625461692', kind: 'picasa',
      thumbnailHoverEffect: 'labelAppear75,slideDown',
      i18n:{ 
        thumbnailImageDescription: '<i style="color:#eee;" class="fa fa-search-plus fa-3x"></i>',
        thumbnailAlbumDescription: '<i style="color:#eee;" class="fa fa-search-plus fa-3x"></i>',
        breadcrumbHome: '<i class="fa fa-camera fa-1x"></i> Photo albums',
        breadcrumbHome_FR: '<i class="fa fa-camera fa-1x"></i> Albums photos'
      },
      thumbnailLabel: { display:true, position:'overImageOnMiddle', align:'center', hideIcons:true },
      galleryToolbarHideIcons: true,
      thumbnailLazyLoad: true
    });
  });
  
×

nanoGALLERY - display images with a lightbox style

This effect is done with the option colorSchemeViewer


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({

      colorSchemeViewer: 'dark',

      photoset: 'none',
      userID: '34858669@N00',
      kind: 'flickr',
      thumbnailWidth: 160,
      thumbnailHeight: 160,
      viewerDisplayLogo: true,
      thumbnailLazyLoad: true,
      thumbnailLabel: { display: true, position: 'onBottom', titleMaxLength: 20 },
      colorScheme: { thumbnail:{ labelBackground: '#000 !important' } },
      photoSorting: 'random',
      touchAnimation: false
    });
  });
  
×

nanoGALLERY on touch screen - touch twice to open thumbnail

By default, after a touch on a thumbnail, the hover animation is started and the thumbnail is opened after a small delay.

This behaviour can be changed to a 2 touch scenario:
    - first touch: starts hover animation,
    - sceond touch: thumbnail is opened.

To activate this scenario, set -1 to touchAutoOpenDelay like in the above example.

This parameter can also be used to define the delay before the thumbnail is automatically opened.

Note: this paramater has no effect on the mouse handling.


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID: '111186676244625461692',

      touchAutoOpenDelay: -1,

      thumbnailWidth: 165,
      thumbnailHeight: 110,
      thumbnailHoverEffect: 'labelSlideUp,borderLighter',
      thumbnailLabel: {display: true, align: 'center'},
      theme: 'clean',
      i18n: { thumbnailImageDescription: 'view photo', thumbnailAlbumDescription: 'open album' }
    });
  });
  
×

nanoGALLERY - thumbnail resolutions dependant of the screen width

Resize your browser to test this feature.

First navigation level:   width: '140 XS100 SM100'   height: '140 XS100 SM100'

Other levels:   width: 'auto' (justified)   height: '200 XS80 SM150 LA250 XL290'


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID:'111186676244625461692',
      
      thumbnailL1Width:'140 XS100 SM100', thumbnailL1Height:'140 XS100 SM100',
      
      thumbnailWidth:'auto', thumbnailHeight:'200 XS80 SM150 LA250 XL290',
      
      thumbnailHoverEffect:[{name: 'imageScale150', duration:700}, {name:'labelAppear75', duration:400}, {name:'descriptionAppear', duration:1000}],
      paginationMaxLinesPerPage: 1,
      imageTransition : 'slide',
      thumbnailLabel:{ display:true, align:'center', position:'overImageOnMiddle' },
      galleryFullpageButton: true
    });
  });
  
×












Download & License







Download v5.2.2
Changelog CDN

For personal, non-profit organizations, or open source projects (without any kind of fee), you may use nanoGALLERY for jQuery for free.


All other uses require the purchase of a professional license.

Licensing Options  /  Get a License






nanoGALLERY is also available for
Joomla (Ozio Gallery) GetSimple CMS





Notifications, Help, Bugs and Contributions

For any question or bug report please post directly on GitHub. Feature requests and possible improvements: all ideas are welcome.
Feel free to submit your own commit.

To be notified about updates, you can star and watch the nanoGALLERY repository on GitHub









Licensing Options


nanoGALLERY for jQuery is licensed under CC BY-NC 3.0. It may be used in commercial projects and applications, or in business environments with the purchase of a professional license.



Open source license

For personal, non-profit organizations, or open source projects (without any kind of fee), you may use nanoGALLERY for free. If fees are associated to the use of nanoGALLERY, your project is not eligible to this license.

All other uses are considered professional. The purchase of a license is required.



Professional license

Purchasing accepts most credit cards and takes seconds. Once purchased, you'll receive a Professional License PDF and you will be able to integrate nanoGALLERY in your projects.

By buying a pro license you support the future development of nanoGALLERY. It is much appreciated!




Website License - 25€

This licensing is for implementing nanoGALLERY on ONE website.

OEM License - 90€

The nanoGALLERY Professional OEM License is for including nanoGALLERY in your own non-free applications and products.
For example: premium themes, site templates, plugins.

Donator License

You decide freely the amount of your support.



If you have special needs, you can also ask for the author's permission. Contact: nano[at]brisbois.fr

×












First Steps



Usage example: $('#element').nanoGallery({ userID : 'YourUserID, kind : 'picasa' });







jQuery plugin usage:



1. Include JS and CSS files in the <HEAD>


<!-- jQuery library (include jQuery only once in your page) -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<!-- nanoGALLERY plugin files -->
<link href="css/nanogallery.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.min.js"></script>




2. Setup your HTML in the <BODY> and initialize the nanoGALLERY script


Setup of the plugin differs depending on the usage method:


Cloud Storage / Online Photo Sharing Website

Flickr Storage Picasa/Google+ Storage

Self hosted images

Use inline elements API



3. Customize your gallery


List of basic properties accepted by the nanoGALLERY() method.


Property Type Default Description
thumbnailHeight integer
string
154 Thumbnails image height in pixels, or 'auto'.
'auto' means cascading grid layout.
thumbnailWidth integer
string
230 Thumbnails image width in pixels, or 'auto'.
'auto' means justified layout.
thumbnailAlignment string 'center' Set the thumbnail alignment.
Possible values: 'left', 'right', 'justified', 'center'.
Note: value 'justified' will ignore the 'thumbnailGutterWidth'.
thumbnailHoverEffect string
object
array
'none' Thumbnail mouse hover effect. The effect will also be triggered by 'tap' on touch-screen.

Combinations: define multiple effect names in the parameter to combine them.
Example: thumbnailHoverEffect='borderDarker,labelAppear75'

Please note that some effects can not be combined (for example: 'imageSlideUp' and 'imageFlipHorizontal'). And some combinations can results in weirds effects...

Possible values: 'borderLighter', 'borderDarker', 'scale120', 'scaleLabelOverImage', 'overScale', 'overScaleOutside', 'slideUp', 'slideDown', 'slideRight', 'slideLeft', 'rotateCornerBL', 'rotateCornerBR', 'imageScale150', 'imageScaleIn80', 'imageScale150Outside', 'imageSplit4', 'imageSplitVert', 'imageSlideUp', 'imageSlideDown', 'imageSlideRight', 'imageSlideLeft', 'imageRotateCornerBL', 'imageRotateCornerBR', 'imageFlipHorizontal', 'imageFlipVertical', 'labelAppear', 'labelAppear75', 'labelOpacity50', 'descriptionAppear', 'descriptionSlideUp', 'labelSlideUpTop', 'labelSlideUp', 'labelSlideDown', 'labelSplit4', 'labelSplitVert', 'labelAppearSplit4', 'labelAppearSplitVert'
theme string 'default' Name of the theme.
Note: the corresponding css-file must be included in the html file.
Possible values: 'default', 'clean', 'light' or your custom one.
colorScheme string
object
'none' Gallery color scheme (breadcrumb and thumbnails).
Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light', 'lightBackground'
Custom color schemes are supported.
colorSchemeViewer string
object
'default' Image viewer color scheme.
Possible values: 'none', 'dark', 'darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light'
Custom color schemes are supported.
RTL boolean false display direction from Right To Left (RTL)











Flickr Storage

Set up your HTML:


Put a <DIV> element in the <BODY> of your HTML page where you want the gallery to be displayed.


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

Initialize the script:



$(document).ready(function () {
  $("#nanoGallery1").nanoGallery({
    kind: 'flickr',
    userID: '34858669@N00'
  });
});
    


×

Picasa/Google+ Storage

Set up your HTML:


Put a <DIV> element in the <BODY> of your HTML page where you want the gallery to be displayed.


<div id="nanoGallery2"></div>
        

Initialize the script:



$(document).ready(function () {
  $("#nanoGallery2").nanoGallery({
    kind: 'picasa',
    userID: '111186676244625461692'
  });
});
        

To retrieve your user ID:


- Google+: display a photo album in Google+, your user ID is in the URL


- Picasa: display a photo album in Picasa, your user ID is in the URL:



×

Use inline elements

Use a list of images using HREF attribute

Set up your HTML:


Put a <DIV> element in the <BODY> of your HTML page where you want the gallery to be displayed.

And add some <A> elements to this container. Each element points to one image.


<div id="nanoGallery3">
  <a href="demonstration/img_01.jpg" data-ngthumb="demonstration/img_01t.jpg" data-ngdesc="Description1">Title Image1</a>
  <a href="demonstration/img_02.jpg" data-ngthumb="demonstration/img_02t.jpg">Title Image2</a>
</div>
        

Initialize the script:



$(document).ready(function () {
  $("#nanoGallery3").nanoGallery();
});
        
×

API

Pass the list of images to the script

Set up your HTML:


Put a <DIV> element in the <BODY> of your HTML page where you want the gallery to be displayed.


<div id="nanoGallery4"></div>
        

Initialize the script:


Use the 'items' parameter to set the list of images.


$(document).ready(function () {
  $("#nanoGallery4").nanoGallery({thumbnailWidth:100,thumbnailHeight:100,
    items: [
      {
        src: 'demonstration/img_01.jpg',		// image url
        srct: 'demonstration/img_01t.jpg',		// thumbnail url
        title: 'image 1', 						// thumbnail title
        description : 'image 1 description'		// thumbnail description
      },
      {
        src: 'demonstration/img_02.jpg',
        srct: 'demonstration/img_02t.jpg',
        title: 'image 2' 
      }
    ]
  });
});
        
×












Settings



General settings

List of properties accepted by the nanoGALLERY() method.


Property Type Default Description
theme string 'default' Name of the theme.
Note: the corresponding css-file must also be included in the html file.
Possible values: 'default', 'clean', 'light' or your custom one.
colorScheme
jsfiddle
string
object
'none' Gallery color scheme (breadcrumb and thumbnails).
Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light', 'lightBackground'
Custom color schemes are supported.
RTL boolean false display direction from Right To Left (RTL)
maxItemsPerLine integer 0 Maximum number of thumbnails per row.
Ignored when thumbnailWidth='auto'. 0 = disabled.
maxWidth integer 0 Maximum width of the gallery in pixels. 0 = disabled.
paginationMaxLinesPerPage
demo
integer 0 Maximum number of thumbnail lines per page (will activate pagination).
0= pagination is disabled.
Ignored when thumbnailWidth='auto' or thumbnailHeight='auto'.
locationHash
demo
boolean false Browser Back/Forward navigation (browser history support) and Deep Linking of images and photo albums.
Note: only one gallery per page should use this feature.
i18n object UI string translations.
lazyBuild string 'none' display the gallery only when visible (= in the viewport)
Possible values: 'loadData', 'display', 'none'
lazyBuildTreshold integer 150 Shorten the viewport area height (in pixel) for lazyBuild.




Settings for thumbnails


Property Type Default Description
thumbnailHeight integer
string
154 Thumbnails image height in pixels, or 'auto'.
This value will be applied to the thumbnail image. The whole thumbnail will be higher.

Advanced settings
thumbnailWidth integer
string
230 Thumbnails image width in pixels, or 'auto'.
This value will be applied to the thumbnail image. The whole thumbnail will be widther.

Advanced settings
thumbnailAlignment string 'center' Set the thumbnail alignment.
Possible values: 'left', 'right', 'justified', 'center'.
Note: value 'justified' will ignore the 'thumbnailGutterWidth'.
thumbnailGutterWidth integer 2 Set the horizontal gutter space between thumbnails.
thumbnailGutterHeight integer 2 Set the vertical gutter space between thumbnails.
thumbnailLabel
jsfiddle
object Display options for the image label (title and description).
Possible parameters: position, display, displayDescription, titleMaxLength, descriptionMaxLength, hideIcons, align, title, itemsCount.

Example: thumbnailLabel:{ position:'overImageOnBottom', hideIcons:true }
      thumbnailLabel.position string 'overImageOnBottom' Position of the label.
Possible values: 'overImageOnBottom', 'overImageOnTop', 'overImageOnMiddle', 'onBottom'
      thumbnailLabel.display boolean true Display or hide the label.
      thumbnailLabel.displayDescription boolean true Display the description.
      thumbnailLabel.titleMaxLength integer 0 Title maximum length to display.
      thumbnailLabel.descriptionMaxLength integer 0 Description maximum length to display.
      thumbnailLabel.hideIcons boolean false Hide thumbnails icons.
      thumbnailLabel.align string Horizontal text alignment.
Possible values: 'right', 'center', 'left'
      thumbnailLabel.title string Variable to set the image title (undescores are replaced by spaces).
Possible values: '%filename', '%filenameNoExt'
      thumbnailLabel.itemsCount string Display the number of items per photo album.
Possible values: 'none', 'title', 'description'
thumbnailHoverEffect string
object
array
'none' Thumbnail mouse hover effect. The effect will also be triggered by 'tap' on touch-screen.

Combinations: define multiple effect names in the parameter to combine them.
Example: thumbnailHoverEffect='borderDarker,labelAppear75'

Please note that some effects can not be combined (for example: 'imageSlideUp' and 'imageFlipHorizontal'). And some combinations can results in weirds effects...

Possible values: 'borderLighter', 'borderDarker', 'scale120', 'scaleLabelOverImage', 'overScale', 'overScaleOutside', 'slideUp', 'slideDown', 'slideRight', 'slideLeft', 'rotateCornerBL', 'rotateCornerBR', 'imageScale150', 'imageScaleIn80', 'imageScale150Outside', 'imageSplit4', 'imageSplitVert', 'imageSlideUp', 'imageSlideDown', 'imageSlideRight', 'imageSlideLeft', 'imageRotateCornerBL', 'imageRotateCornerBR', 'imageFlipHorizontal', 'imageFlipVertical', 'labelAppear', 'labelAppear75', 'labelOpacity50', 'descriptionAppear', 'descriptionSlideUp', 'labelSlideUpTop', 'labelSlideUp', 'labelSlideDown', 'labelSplit4', 'labelSplitVert', 'labelAppearSplit4', 'labelAppearSplitVert'

nanoGALLERY supports additionally 'Transit jQuery plugin' which provides better animation performances in some cases.
To activate it, just include the plugin in the <head> of your page:
<script type="text/javascript" src = "jquery.transit.min.js"> </script>
      thumbnailHoverEffect.name string Name of the hover effect.
      thumbnailHoverEffect.duration integer 400 A number determining how long the animation will run (in milliseconds).
      thumbnailHoverEffect.easing string 'swing' A string indicating which easing function to use for the transition.
      thumbnailHoverEffect.delay integer 0 Set a timer to delay execution of the animation (in milliseconds)
Please note that this is not supported with transit.js
      thumbnailHoverEffect.durationBack integer 200 A number determining how long the back animation will run (in milliseconds).
      thumbnailHoverEffect.easingBack string 'swing' A string indicating which easing function to use for the back transition.
      thumbnailHoverEffect.delayBack string Set a timer to delay execution of the back animation (in milliseconds).
Please note that this is not supported with transit.js
touchAnimation boolean true Enable thumbnail hover animation on touch event (= tap twice to show the image).
touchAutoOpenDelay integer 0 Delay in ms before opening the touched thumbnail.
Particular values:
-1= disabled (user needs to tap twice to open the thumbnail),
0= automatic (the plugin will determine automatically the delay).
Note: the parameter is ignored when 'touchAnimation=false'.
thumbnailDisplayInterval integer 30 Interval in ms between the display of the thumbnails.
thumbnailDisplayTransition boolean true Transition animation used to display each thumbnail.
thumbnailLazyLoad boolean true Lazy load of thumbnails image (images are loaded only when displayed in the viewport).
thumbnailLazyLoadTreshold integer 100 Extend the viewport area (in pixel) for thumbnails image lazy load.
thumbnailAdjustLastRowHeight boolean true Automatically lower the last row height to avoid layout breaks (only for justified layout - thumbailWidth='auto').




Thumbnail size - advanced settings


thumbnailHeight and thumbnailWidth are used to define the size of the thumbnails.
Supported value formats are integer and string:

Value type Description
Integer To specify a fixed height and width.
Example: thumbnailHeight: 150, thumbnailWidth: 200
String special value 'auto':
The width or the height is variable and is computed automatically by the plugin. The other value must must be fixed.
Example: thumbnailHeight: 'auto', thumbnailWidth: 200

multiple thumbnail sizes for fully responsive gallery
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.

Example 1: '200 XS80 SM150 LA250 XL400'
Example 2: '200 XSauto SMauto LA250'
And more... Description
Multi-level navigation For multi-level galleries, it's also possible to use thumbnailL1Height and thumbnailL1Width to set additionally the thumbnail size for the first level.
thumbnailHeight and thumbnailWidth will be used for other levels.
Breakpoints Use following paramters to change the size breakpoints:
thumbnailSizeSM: screen width breakpoint for thumbnail size SM. integer; Default: 480
thumbnailSizeME: screen width breakpoint for thumbnail size ME. integer; Default: 992
thumbnailSizeLA: screen width breakpoint for thumbnail size LA. integer; Default: 1200
thumbnailSizeXL: screen width breakpoint for thumbnail size XL. integer; Default: 1800
Picasa / Google+ storage Thumbnails can be cropped (square) or not. To get the cropped thumbnail, add C after the size value.
Example 1: '200C'
Example 2: '200C XS80C SM150 LA250 XL400'
Flickr storage Please note that depending of the defined size, the image retrieved may be in square format (cropped).




Image display


Property Type Default Description
colorSchemeViewer
jsfiddle
string
object
'default' Image viewer color scheme.
Possible values: 'none', 'dark', 'darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light'
Custom color schemes are supported.
slideshowDelay integer 3000 Photo autoplay speed in milliseconds (slideshow)
slideshowAutoStart boolean false Start automatically the slideshow when an image is displayed
viewer string 'internal' Image display method.
Possible values: 'internal', 'fancybox'
fancyBoxOptions object null Options for fancyBox (if used to display the images). This will overwrite the default settings.
viewerToolbar object Display options for the image toolbar (navigation buttons and captions).
      viewerToolbar.display boolean true Display or hide the toolbar.
      viewerToolbar.position string 'bottom' Vertical position. Posible values: 'top', 'bottom'
      viewerToolbar.style string 'innerImage' Toolbar style. Possible values: 'innerImage', 'stuckImage', 'fullWidth'
      viewerToolbar.autoMinimize integer 800 Breakpoint for switching between minimized and standard toolbar. If the width is lower than this value, the toolbar is switched to minimized.
      viewerToolbar.standard string List of items to display in the standard toolbar (comma separated). The order is taken into account.
Default value: 'minimizeButton,previousButton,pageCounter,nextButton,playPauseButton,fullscreenButton,infoButton,linkOriginalButton,closeButton,label'
Possible values: minimizeButton, previousButton, pageCounter, nextButton, playPauseButton, fullscreenButton, infoButton, linkOriginalButton, closeButton, label, customN
      viewerToolbar.minimized string List of items to display in the minimized toolbar (comma separated). The order is taken into account.
Default value: 'minimizeButton,label'
Possible values: minimizeButton, previousButton, pageCounter, nextButton, playPauseButton, fullscreenButton, infoButton, linkOriginalButton, closeButton, label, customN
viewerDisplayLogo boolean false Display one logo over images (defined in CSS file).
imageTransition string 'swipe' Image swipe animation. Possible values: 'slideAppear', 'swipe'.




Settings for gallery toolbar / breadcrumb


Property Type Default Description
breadcrumbAutoHideTopLevel boolean false The breadcrumb/toolbar is hidden when on top navigation level.
galleryFullpageButton boolean false Enable button in the toolbar to display the gallery in fullpage.
galleryFullpageBgColor string '#111' Background color of the gallery when in fullpage.
galleryToolbarHideIcons boolean false Hide icons in toolbar (breadcrumb)
galleryToolbarWidthAligned boolean true Toolbar is automatically resized to the width of the thumbnails area.




Usage method specific settings


Picasa/Google+ specific settings

List of properties accepted by the nanoGALLERY() method. Following properties are specific to Picasa/Google+ storage. play on jsfiddle

Property Type Default Description
kind string Storage type (mandatory). Must be set to 'picasa'
userID string User ID of the Picasa/Google+ account (mandatory).
album string Album ID - to display only the specified album

To display an album that is limited to people who have a link with an authkey,
use this syntax: 'albumID&authkey=YourAuthkey' where albumID is the ID of the album, and YourAuthkey is the album's authkey.
Example: album: '5851968929721015169&authkey=Gv1sRgCJSlhdKSgoiXtgE'
displayBreadcrumb boolean true Display the navigation breadcrumb
blackList string 'scrapbook|profil' List of keywords to ignore - album's name containing one of the keywords in the title will be ignored.
Keyword separator is |
whiteList string List of keywords to authorize - album's name must contain one of the keywords to be displayed.
Keyword separator is |
albumList string List of albums to display (use album names or album IDs). Separator is |
photoSorting string 'standard' Albums sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'



Flickr specific settings

List of properties accepted by the nanoGALLERY() method. Following properties are specific to Flickr storage. play on jsfiddle

Property Type Default Description
kind string Storage type (mandatory). Must be set to 'flickr'
userID string User ID of the Flickr account (mandatory)

To retrieve your Flickr user ID, use this page: Flickr userID
photoset string Photoset ID - to display only the specified photoset
If set to 'none', all pictures of the photostream are displayed.
displayBreadcrumb boolean true Display the navigation breadcrumb
blackList string List of keywords to ignore - albums containing one of the keywords in the title will be ignored.
Keyword separator is |
whiteList string List of keywords to authorize - albums must contain one of the keywords to be displayed.
Keyword separator is |
albumList string List of albums to display. Separator is |
photoSorting string 'standard' Albums sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'
flickrSkipOriginal boolean true Do not display the original uploaded image (e.g. to avoid rotation issue).



Inline method specific settings
play on jsfiddle

List of properties:

Property Type Default Description
itemsBaseURL string Base URL where images are stored.
dataSorting string 'standard' Items sort order.
Possible values: 'standard', 'reversed', 'random'.

This is the list of supported attributes (case-sensitive).

Attribute Type Default Description
data-ngdesc string Image description.
data-ngid integer Item ID. MANDATORY
data-ngalbumid integer ID of the album containing the item. MANDATORY
data-ngkind string 'image' Item's kind. Possible values: 'image', 'album'.
data-ngthumb string URL of the thumbnail image.
data-ngdest string Destination URL on thumbnail click (instead of displaying an image, the user is redirected to the defined URL).
data-ngthumbImgHeight integer 0 Height in pixel of the thumbnail image.
data-ngthumbImgWidth integer 0 Width in pixel of the thumbnail image.
demo Multi-level navigation


API method specific settings
play on jsfiddle

List of properties:

Property Type Default Description
itemsBaseURL string Base URL where images are stored.
dataSorting string 'standard' Items sort order.
Possible values: 'standard', 'reversed', 'random'.

This is the list of supported attributes for the items object (case-sensitive). The items object contains the list of galleries and all the images.

Property Type Default Description
title string Image title.
description string Image description.
ID integer Item ID. MANDATORY
albumID integer ID of the album containing the item. MANDATORY
kind string 'image' Item's kind. Possible values: 'image', 'album'.
src string URL of the image.
srct string URL of the thumbnail image.
destURL string Destination URL on thumbnail click (instead of displaying an image, the user is redirected to the defined URL).
imgtHeigt integer 0 Height in pixel of the thumbnail image.
imgtWidth integer 0 Width in pixel of the thumbnail image.




Javascript Helpers / Callbacks

Callbacks provide a simple mechanism to extend the capabilities of nanoGALLERY.


Callback Description
fnThumbnailInit Called once after one thumbnail's build. Called for each thumbnail.
fnThumbnailHoverInit
jsfiddle
Called once to initialize the thumbnail hover effect. Called for each thumbnail.
fnThumbnailHoverResize Called when the gallery is resized. Called for each thumbnail.
fnThumbnailHover
jsfiddle
Called on thumbnail hover.
fnThumbnailHoverOut
jsfiddle
Called on thumbnail hover out.
fnThumbnailDisplayEffect Called to display one thumbnail.
fnImgToolbarCustInit
jsfiddle
called once on toolbar building to define the specified custom element.
fnImgToolbarCustDisplay
jsfiddle
Called on each image display. Called once for all image toolbar custom elements.
fnImgToolbarCustClick
jsfiddle
Fired on click event on one image toolbar custom element.
fnViewerInfo
jsfiddle
If defined, it will add an info button to the image viewer toolbar.
Called when the user clicks this info button.
fnProcessData
jsfiddle
Used to extend data associated to thumbnails/images.
Called each time a new element (image or album) is added.

Note: Standard thumbnails hover effects can be combined to hover effects managed by callbacks.













Advanced Settings



Advanced thumbnail mouse hover effects settings

Settings for fine tuning the 'thumbnailHoverEffect' parameter: 'name', 'duration', 'durationBack', 'easing', 'easingBack', 'delay', 'delayBack'.

Only 'name' is mandatory.


Example:



$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind: 'picasa',
    userID: '111186676244625461692',
    thumbnailHoverEffect: [{ name: 'slideUp', duration: 400, durationBack: 200, easing: 'swing', easingBack: 'swing' }]
  });
});
Combine thumbnail mouse hover effects

Examples:



$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind: 'picasa',
    userID: '111186676244625461692',
    thumbnailHoverEffect: 'slideUp,borderLighter'
  });
});


$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind: 'picasa',
    userID: '111186676244625461692',
    thumbnailHoverEffect:
      [{ name: 'slideUp', duration: 400, durationBack: 200, easing: 'swing' },
      { name: 'borderLighter', duration: 300, durationBack: 200, delay: 200 }]
  });
});
i18n

The language defined in the browser is used. If no corresponding definition is found, then the default language is used.



- Internationalization of UI elements:

Following elements support multi-language: 'breadcrumbHome' 'paginationPrevious' 'paginationNext' 'thumbnailImageTitle' 'thumbnailAlbumTitle' 'thumbnailImageDescription' 'thumbnailAlbumDescription'.

Set the correponding i18n properties. Use _LanguageCode to specify one language.


Example:



i18n:{
  paginationPrevious: 'Previous', paginationPrevious_FR: 'Précédent', paginationPrevious_DE: 'Zurück',
  paginationNext: 'Next', paginationNext_FR: 'Suivant', paginationNext_DE: 'Weiter'
}


- Multi-language image titles and descriptions:

Supported by API-method.

Use _LanguageCode to specify one language. So title_FR is the french title, and description_DE is the german description.


Example:



$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    items: [
      {
        src: 'demonstration/image_01.jpg',
        srct: 'demonstration/image_01t.jpg',
        title: 'image 1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        title_FR: 'image 2 (fr)',
        description_FR : 'description image 1 (fr)'
      },
      {
        src: 'demonstration/image_02.jpg',
        srct: 'demonstration/image_02t.jpg',
        title: 'image 2' ,
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        title_FR: 'image 2 (fr)',
        description_FR : 'description image 2 (fr)'
      }
    ]
  });
});
Display images with FancyBox

You can use FancyBox to display images instead of the default internal viewer.

For this, include following JS and CSS files:


<!-- Add fancyBox plugin -->
<link href="third.party/fancybox/jquery.fancybox.css?v=2.1.4" rel="stylesheet" type="text/css">
<script type="text/javascript" src="third.party/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script> 
<link href="third.party/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" type="text/css">
<script type="text/javascript" src="third.party/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
<script type="text/javascript" src="third.party/fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script> 


And initialize the script with the parameter 'viewer', like in :


$(document).ready(function () {
  $("#nanoGallery2").nanoGallery({
  	kind: 'picasa',
  	userID: '111186676244625461692',
    viewer: 'fancybox'
  });
});



















Your Comments





comments powered by Disqus