nanoGALLERY


image gallery simplified

 

nanoGALLERY is a touch enabled and responsive image gallery. It supports pulling in Flickr, Picasa, Google+ and SmugMug photo albums among others.

 



 

 

 

 

 

 













Feature List

Managing your image gallery has never been so simple.







Image Gallery

Display thumbnails with title and description.
Galleries are displayed with smooth animation.
Support pagination.
Images are displayed in full view via a modal popup window.
Easy and highly customizable.

Flickr, Picasa, Google+, SmugMug

Any photo published to your online photo sharing site is automatically added to your website.
You do not need to upload images manually to your site.
Display photos 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.
Galleries and photos are automatically resized.
Download small images on small display (with Flickr, Picasa, Google+ and SmugMug 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 effects.
Touchscreen friendly.

Multi-Level Navigation

Organize your images in albums. Breadcrumb to navigate in photo albums. Unlimited number of sub-levels.







You like it? Thanks to share it!



         





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.

Live Preview

Easy and quick customization with the integrated demonstration panel. Define the settings and view the result directly on the screen.

Slideshow, fullscreen, pagination, content lazy load, image lazy load, themes, deep linking, data caching, image pre-loading, CSS3 Acceleration, 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. ×













Demonstrations









More demonstrations and how-tos:



Online test tool

Deep linking and browser back/forward navigation: view
Pagination / handle a large amount of albums and images: view
Flickr storage:
        - Display full portfolio with breadcrumb navigation: view JSFiddle
        - Display one specific photoset: view JSFiddle
Picasa / Google+ storage:
        - Display full portfolio with breadcrumb navigation: view JSFiddle
        - Display one specific photo album: view JSFiddle
Self hosted images:
        - List of images using HREF attribute: view JSFiddle
        - Multi-level navigation: view
        - List of images passed to the script (API): view JSFiddle
Javascript Helpers:
        - Custom thumbnail hover effect: view JSFiddle






nanoGALLERY Auto display breadcrumb for navigation


  $(document).ready(function () {
    $("#nanoGalleryHome2").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 () {
    $("#nanoGalleryHome3").nanoGallery({
      thumbnailWidth : 160,
      thumbnailHeight : 'auto',
      kind : 'picasa',
      userID : 'cbrisbois@gmail.com',
      album : '5911347863561293937',
      maxItemsPerLine : 4,
      thumbnailLabel : {display:true,position:'onBottom',titleMaxLength:20},
      theme : 'default',
      touchAnimation : false
    });
  });
  
×

nanoGALLERY Pagination 1 row


  $(document).ready(function () {
    $("#nanoGalleryHome4").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 () {
    $("#nanoGalleryHome5").nanoGallery({
      thumbnailWidth : 'auto',
      thumbnailHeight : 250,
      kind : 'picasa',
      userID : 'cbrisbois@gmail.com',
      album : '5911347863561293937',
      colorScheme : 'none',
      thumbnailHoverEffect : 'labelAppear75,borderDarker',
      theme : 'light',
      i18n : {'thumbnailImageDescription':'View Photo', 'thumbnailAlbumDescription':'Open Album'},
      thumbnailLabel : {display:true,position:'overImageOnMiddle'}
    });
  });
  
×

Test online:

You can test different settings combinations with this online tool.




×












License & Download




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.


Download View Licensing Options

Want a very fast access to the plugin:

use the CDN version






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



Other versions

nanoGALLERY is an image gallery for jQuery, and it's also available for Joomla (Ozio Gallery)  and  GetSimple CMS









Licensing Options


nanoGALLERY for jQuery is licensed under Creative Commons Attribution-NonCommercial 3.0 license.

nanoGALLERY for jQuery 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 all set to use nanoGALLERY in your projects.

The Professional License comes in two varieties:

- nanoGALLERY Professional Website License

This licensing is for implementing nanoGALLERY on ONE website.

- nanoGALLERY Professional OEM License

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

Select license type:

Author's permission

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) -->
<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/4.4.2/css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/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'
  });
});
    


Example:

Result
HTML
Javascript

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

jQuery("#nanoGallery").nanoGallery({
  kind : 'flickr',
  userID : '34858669@N00',
  photoset : '72157594299597591',		//remove this line to display all the photosets
  thumbnailWidth : 125,
  thumbnailHeight : 125,
  thumbnailHoverEffect : 'borderLighter,labelAppear75'
  viewerDisplayLogo : true,
  theme : 'clean'
});
            
×

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',
    blackList : 'Scrapbook|forhomepage|profil'
  });
});
        

Example:

Result
HTML
Javascript

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

jQuery("#nanoGallery").nanoGallery({
    kind : 'picasa',
    userID : 'cbrisbois@gmail.com',
    album : '5911347863561293937',		//remove this line to display all the albums
    thumbnailWidth : 144,
    thumbnailHeight : 144,
    thumbnailHoverEffect : 'borderLighter,labelAppear75',
    viewerDisplayLogo : true
});
            
×

SmugMug 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="nanoGallery"></div>
        

Initialize the script:



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

Example:

Result
HTML
Javascript

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

jQuery("#nanoGallery").nanoGallery({
    kind : 'smugmug',
    userID : 'kris-b',
    gallery : 'cars',
    thumbnailWidth : 200,
    thumbnailHeight : 200,
    thumbnailHoverEffect : 'borderLighter,labelAppear75',
    theme : 'default'
});
            
×

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">Image1</a>
            <a href="demonstration/img_02.jpg" data-ngthumb="demonstration/img_02t.jpg"></a>
          </div>
        

Initialize the script:



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

Example:

Result
HTML
Javascript

<div id="nanoGallery">
    <a href="image_01.jpg" 
        data-ngThumb="image_01t.jpg"
        data-ngDesc="Description1">Image1</a>
    <a href="image_02.jpg" 
        data-ngThumb="image_02t.jpg" 
        data-ngDesc="Description2">Image2</a>
    <a href="image_03.jpg"
        data-ngThumb="image_03t.jpg"
        data-ngDesc="Description3">Image3</a>
</div>
            

jQuery("#nanoGallery").nanoGallery({
    thumbnailWidth : 120,
    thumbnailHeight : 80,
    thumbnailHoverEffect : 'borderLighter,descriptionSlideUp',
    itemsBaseURL : 'http://brisbois.fr/nanogallery4/demonstration'
});
            
×

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' 
      }
    ]
  });
});
        

Example:

Result
HTML
Javascript



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

jQuery("#nanoGallery").nanoGallery({
    thumbnailWidth: 120,
    thumbnailHeight: 120,
    items: [{
        src: 'image_01.jpg', // image
        srct: 'image_01t.jpg', // thumbnail
        title: 'image 1', // title
        description: 'Description 1' // description
    }, {
        src: 'image_02.jpg',
        srct: 'image_02t.jpg',
        title: 'image 2'
    }, {
        src: 'image_03.jpg',
        srct: 'image_03t.jpg',
        title: 'image 3'
    }],
    itemsBaseURL: 'http://brisbois.fr/nanogallery4/demonstration/',
    thumbnailLabel: {
        display: true,
        position: 'overImageOnMiddle',
        align: 'center'
    },
    thumbnailHoverEffect: 'borderLighter,imageSplit4',
    theme: 'clean'
});
            
×












Settings



General settings

List of properties accepted by the nanoGALLERY() method.


Property Type Default Description
thumbnailHeight integer
string
154 Thumbnails height in pixels, or 'auto'

Value 'auto' requires the imagesloaded.js plugin:
<script type="text/javascript" src = "third.party/imagesloaded/imagesloaded.pkgd.min.js"> </script>
thumbnailWidth integer
string
230 Thumbnails width in pixels, or 'auto' or 'autoUpScale'

Values 'auto' and 'autoUpScale' require the imagesloaded.js plugin:
<script type="text/javascript" src = "third.party/imagesloaded/imagesloaded.pkgd.min.js"> </script>
maxItemsPerLine integer 0 Maximum number of thumbnails per line. Ignored when thumbnailWidth='auto'.
viewer string 'internal' Image display method: 'internal', 'fancybox'
thumbnailLabel 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' 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 Add the number of items in one per photo album.
Possible values: 'none', 'title', 'description'
thumbnailHoverEffect string
object
array
'none' Thumbnail mouse hover effect.

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

Possible values: 'slideUp', 'slideDown', 'slideLeft', 'slideRight', 'imageSlideUp', 'imageSlideDown', 'imageSlideLeft', 'imageSlideRight', 'labelAppear', 'labelAppear75', 'labelSlideDown', 'labelSlideUp', 'labelOpacity50', 'imageOpacity50', 'borderLighter', 'borderDarker' 'imageInvisible', 'descriptionSlideUp', 'labelSplitVert', 'labelSplit4', 'labelAppearSplitVert', 'labelAppearSplit4', 'imageSplitVert', 'imageSplit4'

Transit jQuery plugin is required for following additional values:

'imageScale150', 'imageScale150Outside', 'scale120', 'overScale', 'overScaleOutside', 'scaleLabelOverImage', 'rotateCornerBR', 'rotateCornerBL', 'imageRotateCornerBR', 'imageRotateCornerBL', 'imageFlipHorizontal', 'imageFlipVertical'

Include it in your <head>:
<script type="text/javascript" src = "third.party/transit/jquery.transit.min.js"> </script>
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 yout 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 viewercolor scheme
Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light'
Custom color schemes are supported.
touchAnimation boolean true Enable animation on touch event (= tap twice to show the image)
galleryToolbarWidthAligned boolean true Toolbar is automatically resized to the width of the thumbnails area
galleryToolbarHideIcons boolean false Hide icons in toolbar (breadcrumb)
slideshowDelay integer 3000 Photo autoplay speed in milliseconds (slideshow)
paginationMaxItemsPerPage integer 0 Maximum number of thumbnails per page (pagination)
0= pagination is disabled. Ignored when thumbnailWidth='auto' or thumbnailHeight='auto'.
paginationMaxLinesPerPage integer 0 Maximum number of thumbnail lines per page (pagination)
0= pagination is disabled.
Ignored when thumbnailWidth='auto' or thumbnailHeight='auto'.
thumbnailDisplayInterval integer 30 Interval in ms between the display of 2 thumbnails
thumbnailDisplayTransition boolean true Transition animation before displaying one 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
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.
i18n object UI string translations
locationHash boolean false Browser back/forward navigation and Deep Linking of images and photo albums.
Note: only one gallery per page should use this feature.
viewerDisplayLogo boolean false Display logo over images (defined in CSS file)
itemsBaseURL string Base URL where images are stored (not valid for cloud storage).
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'
breadcrumbAutoHideTopLevel boolean false The breadcrumb is hidden when on top navigation level.



Specific Settings


- Picasa/Google+ specific settings

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


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.
displayBreadcrumb boolean true Display the navigation breadcrumb
blackList string 'scrapbook|profil' 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'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random'



- Flickr specific settings

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


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
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'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random'
flickrSkipOriginal boolean true Do not display the original uploaded image (e.g. to avoid rotation issue).



- SmugMug specific settings

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'
albumSorting string 'standard' Photos sort order: 'standard', 'reversed', 'random'



- Inline method specific settings

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


Attribute Type Default Description
data-ngdesc string Image description.
data-ngid integer Item ID.
data-ngalbumid integer ID of the album containing the item.
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).



- API method specific settings

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.
albumID integer ID of the album containing the item.
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).



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.
fnThumbnailHoverInit Called once to initialize the thumbnail hover effect.
fnThumbnailHover Called on thumbnail hover.
fnThumbnailHoverOut Called on thumbnail hover out.
fnThumbnailDisplayEffect Called to display one thumbnail.

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

For a sample, look at : this JSFIDDLE (helpers for thumbnail hover effect)













Advanced Settings



Advanced thumbnail mouse hover effects settings

Settings for fine tuning the 'thumbnailHoverEffect' parameter: 'name' 'duration' 'durationBack' 'easing' 'easingBack'

Only 'name' is mandatory.


Example:



$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind:'picasa',
    userID:'cbrisbois@gmail.com',
    blackList:'scrapbook|forhomepage|profil',
    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',
    blackList:'scrapbook|forhomepage|profil',
    thumbnailHoverEffect:'slideUp,borderLighter'
  });
});


$(document).ready(function () {
  $("#nanoGallery").nanoGallery({
    kind:'picasa',
    userID:'cbrisbois@gmail.com',
    blackList:'scrapbook|forhomepage|profil',
    thumbnailHoverEffect:
      [{'name':'slideUp','duration':400,'durationBack':200,'easing':'swing','easingBack':'swing'},
      {'name':'borderLighter','duration':300,'durationBack':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',
    blackList:'Scrapbook|forhomepage|profil',
    viewer:'fancybox'
  });
});



















Your Comments





comments powered by Disqus