nanoGALLERY 

nanoGALLERY Auto display breadcrumb for navigation

Use the parameter breadcrumbAutoHideTopLevel to display the breadcrumb only when an album is opened.

  $(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

To display the gallery with a cascading layout, set thumbnailHeight to 'auto' and set a width in pixel to thumbnailWidth.

  $(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

Use the parameter paginationMaxLinesPerPage.

  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID: '111186676244625461692',
      album: '5911347863561293937',
      thumbnailWidth: 165,
      thumbnailHeight: 110,

      paginationMaxLinesPerPage: 1,

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

nanoGALLERY Justified layout

To display the gallery with a justified layout, set thumbnailWidth to 'auto' and set a height in pixel to thumbnailHeight.

  $(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

To display the full Flick photostream, set the option photoset to 'none'.

  $(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="https://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
    });
  });
  

nanoGALLERY - Selection mode with checkboxes

Gallery configuration: use the parameters itemsSelectable and showCheckboxes.

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

      
      itemsSelectable: true,
      showCheckboxes: true,
      

      thumbnailLabel:{display:true,position:'overImageOnBottom',titleMaxLength:20},
      thumbnailAlignment: 'center',
      galleryToolbarWidthAligned: true,
      locationHash:false,
    });
  });
  

API methods:

  jQuery('#btnCheckboxCountSelected').on('click', function() {
      var lst=jQuery('#nanoGallery').nanoGallery('getSelectedItems');
      var a=0,
      i=0;
      for( var n=0; n<lst.length; n++ ) {
          if( lst[n].kind == 'album' ) {
            a++;
          }
          else {
            i++;
          }
      }
      alert(lst.length+ ' selected items ('+a+' albums / '+i+' images)');
  });
  
  jQuery('#btnCheckboxUnselect').on('click', function() {
      var items=jQuery('#nanoGallery').nanoGallery('getSelectedItems');
      jQuery('#nanoGallery').nanoGallery('unselectItems', items)
  });
  

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!






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