nanoGALLERY  v5.4.0 / 2 Feb 2015





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.

 



 

 

 

 

 

 Usage examples




With online photo sharing website:

Flickr Storage Picasa/Google+ Storage

With self hosted images:

nanoPhotosProvider Inline elements API

 

 

 

 

 

Documentation glossary













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) and LTR (Left To Right) display.
Thumbnails can redirect to an URL instead of an image.
Customizable image toolbar.
Slideshow, fullscreen, pagination, content lazy load, image lazy load, themes, deep linking, data caching, image pre-loading, i18n, IE9+...



















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.4.0
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>

First include the jQuery library:


  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  


Then, include the JS and CSS 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



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' Sets 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 Sets the display direction from Right To Left (RTL). Default is from Left to Right (LTR).











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 the extension nanoPhotosProvider

Extension to publish your self-hosted photos simply and automatically to nanoGALLERY.
Content is provided on demand when browsing the albums of the gallery.
Thumbnails are generated automatically.

For a full description, see: https://github.com/Kris-B/nanoPhotosProvider

Script example:



  jQuery(document).ready(function () {
    jQuery("#nanoGallery1").nanoGallery({
      thumbnailWidth: 150,
      thumbnailHeight: 150,
      kind: 'json',
      jsonProvider: 'http://mywebsever.com/mypath/nanoPhotosProvider/nanoPhotosProvider.php',
    });
  });
        

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 Sets the display direction from Right To Left (RTL). Default is from Left to Right (LTR).
maxItemsPerLine integer 0 Maximum number of thumbnails per row.
Ignored when thumbnailWidth is 'auto'. 0 = disabled.
maxWidth integer 0 Maximum width of the gallery in pixels. 0 = disabled.
paginationDots boolean false Displays dots for thumbnail pagination instead of page numbers
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 Enables hash tracking.
This will activate 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.
itemsSelectable boolean false Enables thumbnail selection (CTRL+click, or long touch).
i18n object UI string translations.
lazyBuild string 'none' Displays the gallery only when visible (= in the viewport)
Possible values: 'loadData', 'display', 'none'
lazyBuildTreshold integer 150 Shortens the viewport area height (in pixel) for lazyBuild.
breakpointSizeSM integer 480 Screen width breakpoint for size SM. Used for thumbnail sizes and image display.
breakpointSizeME integer 992 Screen width breakpoint for size ME. Used for thumbnail sizes and image display.
breakpointSizeLA integer 1200 Screen width breakpoint for size LA. Used for thumbnail sizes and image display.
breakpointSizeXL integer 1800 Screen width breakpoint for size XL. Used for thumbnail sizes and image display.




Settings for thumbnails





General settings

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' Sets the thumbnail alignment.
Possible values: 'left', 'right', 'justified', 'center'.
Note: value 'justified' will ignore the 'thumbnailGutterWidth'.
thumbnailGutterWidth integer 2 Sets the horizontal gutter space between thumbnails.
thumbnailGutterHeight integer 2 Sets 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 Displays or hides the label.
      thumbnailLabel.displayDescription boolean true Displays the description.
      thumbnailLabel.titleMaxLength integer 0 Title maximum length to display.
      thumbnailLabel.descriptionMaxLength integer 0 Description maximum length to display.
      thumbnailLabel.hideIcons boolean false Hides 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 Displays 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 Sets 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 Sets a timer to delay execution of the back animation (in milliseconds).
Please note that this is not supported with transit.js
touchAnimation boolean true Enables 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 Extends 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').



Thumbnails - Advanced sizes

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
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).



Thumbnails - Advanced effects

- Settings for advanced thumbnail hover effects:

Possible parameters: 'name', 'duration', 'durationBack', 'easing', 'easingBack', 'delay', 'delayBack'. (Only 'name' is mandatory.)

Example:
    thumbnailHoverEffect: [{ name: 'slideUp', duration: 400, durationBack: 200, easing: 'swing', easingBack: 'swing' }]



- Combine multiple thumbnail hover effects:

Example 1:
    thumbnailHoverEffect: 'slideUp,borderLighter'

Example 2:
    thumbnailHoverEffect:
        [{ name: 'slideUp', duration: 400, durationBack: 200, easing: 'swing' },
        { name: 'borderLighter', duration: 300, durationBack: 200, delay: 200 }]




Thumbnails - Settings for 1st navigation level

For multi-level galleries, it's also possible to define settings specifically for the first navigation level.

Property Description
thumbnailL1Height Defines thumbnails height for the first navigation level. Supports the same settings as thumbnailHeight.
thumbnailL1Width Defines thumbnails width for the first navigation level. Supports the same settings as thumbnailWidth.
thumbnailL1Label Display options for the image label (title and description). Supports the same settings as thumbnailLabel (position, display, displayDescription, titleMaxLength, descriptionMaxLength, hideIcons, align, title, itemsCount).
thumbnailL1HoverEffect Effect triggered on mouse hover or on tap (touch-screen). Supports the same settings as thumbnailHoverEffect.
touchAnimationL1 Delay in ms before opening the touched thumbnail. Same behaviour as as touchAnimation.




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 Starts 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 Displays or hides 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 Displays 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 Enables button in the toolbar to display the gallery in fullpage.
galleryFullpageBgColor string '#111' Background color of the gallery when in fullpage.
galleryToolbarHideIcons boolean false Hides 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 Displays 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', 'randomNN' (where NN is the maximum number of items to display), 'titleAsc', 'titleDesc'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random', 'randomNN' (where NN is the maximum number of items to display), 'titleAsc', 'titleDesc'
picasaUseUrlCrossDomain boolean true Access Picasa / Google+ using the cross domain URL instead of the standard one.



Flickr specific settings

List of properties accepted by the nanoGallery() method. Following properties are specific to Flickr storage. play on jsfiddle
Note: please setup your gallery in order to respect the Flickr terms of use

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 Displays 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', 'randomNN' (where NN is the maximum number of items to display), 'titleAsc', 'titleDesc'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random', 'randomNN' (where NN is the maximum number of items to display), 'titleAsc', 'titleDesc'
flickrSkipOriginal boolean true Doesn't 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: please set a value to each item (image and album).
data-ngalbumid integer ID of the album containing the item. MANDATORY: please set a value to each item (image and album).
data-ngkind string 'image' Item's kind. Possible values: 'image', 'album'.
data-ngSrcXS string URL of the image to be displayed on screen size XS.
data-ngSrcSM string URL of the image to be displayed on screen size SM.
data-ngSrcME string URL of the image to be displayed on screen size ME.
data-ngSrcLA string URL of the image to be displayed on screen size LA.
data-ngSrcXL string URL of the image to be displayed on screen size XL.
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.
srcXS string URL of the image to be displayed on screen size XS.
srcSM string URL of the image to be displayed on screen size SM.
srcME string URL of the image to be displayed on screen size ME.
srcLA string URL of the image to be displayed on screen size LA.
srcXL string URL of the image to be displayed on screen size XL.
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.



nanoPhotosProvider specific settings

List of properties accepted by the nanoGallery() method. Following properties are specific to the usage of nanoPhotosProvider. Full documentation.

Property Type Default Description
kind string Storage type (mandatory). Must be set to 'json'
jsonProvider string URL to the nanoPhotosProvider.php file.
jsonCharset string 'Latin' Sets the string charset for json data. Possible values: 'Latin', 'UTF-8'




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

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





API methods

Usage: $('#yourElement').nanoGallery('method', options);


Method Option(s) Description
reload Reloads the current album.
Usage: $('#yourElement').nanoGallery('reload'); jsfiddle
option option_name Returns the value of an option.
Usage: $('#yourElement').nanoGallery('option', option_name);
option option_name, new_value Sets the value of an option (note: only some options are supported).
Usage: $('#yourElement').nanoGallery('option', option_name, new_value);
getItem item_index Returns one item (object).
Usage: $('#yourElement').nanoGallery('getItem', item_index);
getItems Returns every items (array of objects).
Usage: $('#yourElement').nanoGallery('getItems');
getItemsIndex [item1, item2, ...] Returns the indexes of some items (array).
Usage: $('#yourElement').nanoGallery('getItemsIndex', [item1, item2, item3, ...]);
getSelectedItems Returns the current selected items (array).
Usage: $('#yourElement').nanoGallery('getSelectedItems'); jsfiddle
selectItems [item1, item2, ...] Selects some items (array).
Usage: $('#yourElement').nanoGallery('selectItems', [item1, item2, item3, ...]);
unselectItems [item1, item2, ...] Unselects some items (array).
Usage: $('#yourElement').nanoGallery('unselectItems', [item1, item2, item3, ...]); jsfiddle




i18n

nanoGALLERY supports 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'.
Sets 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)'
              }
            ]
          });
        });
        












Your Comments





comments powered by Disqus