nanoGALLERY





image gallery simplified

 

nanoGALLERY is a touch enabled and 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

Display thumbnails with title and description.
Justified, cascading and grid layout.
Images are displayed in full view via a modal popup window.
Easy and highly customizable.
Thumbnails can redirect to an URL instead of an image.
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.
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.
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...







More Features...

User Friendly

Easy to use. Support browser back/forward navigation. Can be controlled using mouse, keyboard or touchscreen.

Easy Setup and Highly Customizable

Designed to be really as simple as possible to setup and to use. Many options are available to advanced users to tweak the gallery.

Color Scheme

Allows to change layout without editing any CCS file. Can be used with pre-defined or custom ones.

Front-end Frameworks

Successfully tested with Boostrap (Twitter), Foundation (Zurb) and Gumby.

Link to URLs

Thumbnails can be used to open an URL instead of displaying an image.

Browser support

Chrome, Firefox, Safari, IE8+, Android, Windows Phone.

Slideshow, fullscreen, pagination, content lazy load, image lazy load, themes, deep linking, data caching, image pre-loading, i18n...

Need more?

nanoGALLERY can be extended using Javascript Helpers.

×

Why another jQuery Gallery?

There are many excellent galleries (for jQuery, or other frameworks), but for one my projects I couldn't find one that really fits my main requirements:

        - responsive and mobile friendly,
        - ability to easily and quickly publish new photos,
        - organise photos in albums.

I didn't want to spend time for rich publishing features. So I chose to use an online storage service like Flickr. Flickr has already great upload features on desktop and on mobile devices. You can add titles, descriptions, tags and you can arrange photos in photosets. One part of the project was done...

After this, I was able to focus on the other features. And so I developped this nanoGALLERY.

I thought that other people have the same needs as me, so I decided to share my work. If I could help you, please let me know. ×













made with nanoGALLERY











Select demonstration:










nanoGALLERY Auto display breadcrumb for navigation


  $(document).ready(function () {
    $("#nanoGallery").nanoGallery({
      kind: 'picasa',
      userID: 'cbrisbois@gmail.com',
      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: 'cbrisbois@gmail.com',
      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: 'cbrisbois@gmail.com',
      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: 'cbrisbois@gmail.com', 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: 'cbrisbois@gmail.com', 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: 'cbrisbois@gmail.com',

      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:'cbrisbois@gmail.com',
      
      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.0.3 CDN Version

For personal, non-profit organizations, or open source projects, 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, you may use nanoGALLERY for free.

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!



The Professional License comes in two varieties:

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.



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

×












Documentation



Usage example: $('#element').nanoGallery({ userID : 'YourEmail@gmail.com', kind : 'picasa' });







jQuery plugin usage:



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


<!-- jQuery library (MANDATORY - but include it 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="http://cdnjs.cloudflare.com/ajax/libs/nanogallery/5.0.3/css/nanogallery.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/nanogallery/5.0.3/jquery.nanogallery.min.js"></script>




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


Select your usage method:


- Cloud Storage / Online Photo Sharing Website:

Flickr Storage Picasa/Google+ Storage SmugMug Storage

- Self hosted images:

Use inline elements API

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: 'cbrisbois@gmail.com'
  });
});
        
×

SmugMug Storage

Set up your HTML:

NOTE: SmugMug support will be removed in 5.1.0 by lack of user and because the API is not very smart.


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


<div id="nanoGallery"></div>
        

Initialize the script:



$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind: 'smugmug',
    userID: 'kris-b'
  });
});
        
×

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.
colorSchemeViewer
jsfiddle
string
object
'default' Image viewer color scheme.
Possible values: 'none', 'dark', 'darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light'
Custom color schemes are supported.
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.
slideshowDelay integer 3000 Photo autoplay speed in milliseconds (slideshow)
slideshowAutoStart boolean false Start automatically the slideshow when an image is displayed
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.
viewer string 'internal' Image display method.
Possible values: 'internal', 'fancybox'
viewerToolbar object Display options for the viewer toolbar (navigation buttons and captions)
Default: {position:'bottom', style:'innerImage'}

Parameters:
- position: 'top', 'bottom'
- style: 'innerImage', 'stuckImage', 'fullWidth'
viewerDisplayLogo boolean false Display one logo over images (defined in CSS file).
imageTransition string 'slideAppear' Image swipe animation. Possible values: `slideAppear`, `swipe`.
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.

Screen resolution dependant size (beta):
Syntaxe: 'defaultHeight xsH1 smH2 meH3 laH4 xlH5'
where H1 to H5 are the heights for resolutions xs to xl.
Example: '200 xs80 sm150 la250 xl400'

Note to Flickr/Picasa/Google+ users: depending on this parameter's value, the image retrieved may be in square format (cropped).
This is by design of their respective API. So for Picasa for example, values (not limited to) 32, 48, 64, 72, 104, 144, 150, 160 will return cropped thumbnails.
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.

Screen resolution dependant size (beta):
Syntaxe: 'defaultWidth xsW1 smW2 meW3 laW4 xlW5'
where W1 to W5 are the widths for resolutions xs to xl.
Example: '200 xs80 sm150 la250 xl400'

Note to Flickr/Picasa/Google+ users: depending on this parameter's value, the image retrieved may be in square format (cropped).
This is by design of their respective API. So for Picasa for example, values (not limited to) 32, 48, 64, 72, 104, 144, 150, 160 will return cropped thumbnails.
thumbnailL1Height integer
string
154 beta Thumbnails image height for the first navigation level.
See thumbnailHeight for usage.
thumbnailL1Width integer
string
154 beta Thumbnails image width for the first navigation level.
See thumbnailWidth for usage.
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 = "third.party/transit/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').


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.



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



- SmugMug specific settings

NOTE: SmugMug support will be removed in 5.1.0 by lack of user and because the API is not very smart.

List of properties accepted by the nanoGALLERY() method. Following properties are specific to SmugMug storage.

Note: SmugMug API doesn't return the thumbnail image for the galleries. Therefore a dummy icon is displayed instead.


Property Type Default Description
kind string Storage type (mandatory). Must be set to 'smugmug'
userID string User nickname of the SmugMug account (mandatory)
gallery string Gallery name - to display only this specified gallery
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 |
photoSorting string 'standard' Albums sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random', 'titleAsc', 'titleDesc'



- 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

Helpers provide a simple mechanism to extend the capabilities of nanoGALLERY. Helpers are implemented since nanoGALLERY v4.3.1


Helper 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.
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 helpers.













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: 'cbrisbois@gmail.com',
    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: 'cbrisbois@gmail.com',
    thumbnailHoverEffect: 'slideUp,borderLighter'
  });
});


$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind: 'picasa',
    userID: 'cbrisbois@gmail.com',
    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: 'cbrisbois@gmail.com',
    viewer: 'fancybox'
  });
});



















Your Comments





comments powered by Disqus