nanogallery2 options - reference guide

nanogallery2 is highly customizable and fully adjustable to suit your needs.
This page lists the options accepted by nanogallery2 (everything is CaSe sEnSiTiVe).

Settings are passed to the gallery on initialization:

with HTML markup:

Options are configured with the data-nanogallery2 attribute.

      <div id="nanogallery2" data-nanogallery2='{
          "userID": "[email protected]",
          "kind": "flickr",
          "thumbnailHeight": 200,
          "thumbnailWidth": "auto",
          galleryDisplayMode: "rows",

or, with javascript:

Options are passed to the nanogallery2() function.

        userID: [email protected]',
        kind: 'flickr',
        thumbnailHeight: 200,
        thumbnailWidth: 'auto',
        galleryDisplayMode: 'rows',


Enjoy using nanogallery2


Configure the layout of the gallery.
property type default description min
colorScheme string
'dark' Gallery color scheme (thumbnails, navigation...).
Possible values: 'dark', 'light'
Custom color schemes are supported.
galleryDisplayMode string 'fullContent' Possible values:
- 'fullContent': display all thumbnails at once
- 'moreButton': display N rows and a button to show N more rows (see galleryDisplayMoreStep)
- 'pagination': display N rows and numbers/dots to paginate the gallery (see galleryMaxRows)
- 'rows': display max N rows (see galleryMaxRows)
galleryDisplayMoreStep integer 2 Set the number of rows to display each time the "more button" is hit.
only for galleryDisplayMode: 'moreButton'
galleryPaginationMode string 'rectangles' Display type in pagination mode:
- 'rectangles'
- 'dots'
- 'numbers'
only for galleryDisplayMode: 'pagination'
galleryMaxRows integer 2 Maximum number of rows to display
Only for galleryDisplayMode: 'rows' or galleryDisplayMode: 'pagination'.
Not supported if thumbnailHeight: 'auto'
paginationVisiblePages integer 10 Maximum number of pagination items displayed
only for galleryDisplayMode: 'pagination' and galleryPaginationMode: 'numbers'
paginationSwipe boolean true Enables swipe gesture to display next/previous gallery page. 1.0
galleryLastRowFull boolean false When enabled, the last thumbnail's row will not be displayed if it doesn't fill the full width. 1.0
gallerySorting string '' Sort order. No sorting by default.
Possible values: 'titlesasc', 'titledesc', 'reversed', 'random' (=shuffle).
galleryMaxItems integer 0 Maximum number of items per album. 0 = display all. 1.0
galleryResizeAnimation boolean true Moves the thumbnails to their new position when the gallery is resized. 1.0
thumbnailOpenOriginal boolean false Displays the original image (for example in Flickr or Google Photos), without opening the lightbox. 1.0
thumbnailOpenImage boolean true Pure gallery: lightbox is disabled. No image will be displayed. 1.0
openOnStart string Opens the specified album or display the specified image on library start.
Syntax: 'albumID' or 'albumID/imageID'
thumbnailSelectable boolean false Enable/disable the selection mode. Allows the user to select multiple thumbnails. 1.0
thumbnailDisplayOutsideScreen boolean false Display or hide thumbnails which are displayed outside of the screen (display may impact performances) 1.2

Gallery layout style

3 layout styles are available: 'grid', 'justified' and 'cascading'
You don't need to specify the layout style, it is automatically set based on the size of the thumbnails.
  • grid layout
    Height and width is fixed for all thumbnails.
      Define the height and the width.
      example: thumbnailWidth: 300, thumbnailHeight: 200
  • justified layout
    Width is automaticaly calculated to respect the image ratio.
      set the special value 'auto' to thumbnailWidth
      example: thumbnailWidth: 'auto', thumbnailHeight: 200
  • cascading layout
    Height is automaticaly calculated to respect the image ratio.
      set the special value 'auto' to thumbnailHeight
      example: thumbnailWidth: 300, thumbnailHeight: 'auto'


Configure the layout and the content of the thumbnails.

property type default description min
thumbnailWidth integer
300 Thumbnails image width in pixels, or 'auto'.
Use 'auto' for justified layout.
thumbnailHeight integer
200 Thumbnails image height in pixels, or 'auto'.
Use 'auto' for cascading grid layout.
thumbnailCrop boolean true Thumbnail image will be cropped to avoid black borders (only for grid layout).
Note: it is mandatory to set the thumbnail size.
thumbnailCropScaleFactor decimal 1.5 This option is only for Google Photos and Flickr.
Activating the crop option to avoid black image borders may scale the thumbnail image up.
For this case and to avoid quality loss, the thumbnailCropScaleFactor will be applied to the thumbnail size to get a better image quality.
thumbnailAlignment string 'center' Sets the thumbnail alignment.
Possible values: 'left', 'right', 'justified', 'center'.
Note: the parameter 'thumbnailGutterWidth' is ignored when thumbnailAlignment: 'justified'.
thumbnailGutterWidth integer 2 Sets the horizontal gutter space between thumbnails. 1.0
thumbnailGutterHeight integer 2 Sets the vertical gutter space between thumbnails. 1.0
thumbnailBorderHorizontal integer 2 Set the left and right thumbnail border size. 1.0
thumbnailBorderVertical integer 2 Set the top and bottom thumbnail border size. 1.0
thumbnailFeaturedKeyword string '*featured' Keyword to set the feature status of a thumbnail. The keyword is searched in the title and the description.
If the keyword is found, the featured icon will be displayed over the thumbnail.
thumbnailDisplayInterval integer 15 Interval in ms between the display of 2 thumbnails. 1.0
thumbnailDisplayTransition string 'fadeIn' Transition used to display each thumbnail.
Possible values: 'slideUp', 'slideDown', 'scaleUp', 'scaleDown', 'fadeIn', 'randomScale', 'custom'

scaleDown accept also the syntax scaleDown_SF_EASING
where: SF is the start scale factor and EASING is an easing formula name.
Example: scaleDown_2_bounce
thumbnailDisplayTransitionDuration integer 240 Duration of the display transition. 1.0
thumbnailStacks integer 0 Add N stacks behin each thumbnail. Usefull for thumbnails hover effects 1.2

Thumbnail responsive sizes

Define multiple thumbnail sizes for a fully responsive gallery.
The used sized is dependant of the screen resolution.
5 screen resolutions are supported: XS (extra-small), SM (small), ME (medium), LA (large), XL (extra-large)
  • Use the following syntax to assign multiple values to thumbnailWidth:
    'defaultWidth XSw1 SMw2 MEw3 LAw4 XLw5' where w1 to w5 are the thumbnails widths for resolutions XS to XL.
  • and for thumbnailHeight
    'defaultHeight XSh1 SMh2 MEh3 LAh4 XLh5' where h1 to h5 are the heights for resolutions XS to XL.
  • Not all values are mandatory. The default value will be used instead.
  • The value auto is supported.

  • Grid layout:
    thumbnailWidth: '300 XS100 LA400 XL500', thumbnailHeight: '200 XS80 LA250 XL350'
  • Grid and justified layout depending on the resolution:
    thumbnailWidth: 'auto XS80 SM120', thumbnailHeight: '200 XS80 SM120'
  • Justified and cascading layout depending on the resolution:
    thumbnailWidth: 'auto XS80 SM120', thumbnailHeight: '200 XSauto SMauto'

Thumbnail label

The label is composed by a title and a description. Set these settings to the thumbnailLabel parameter.


        thumbnailHeight: 200,
        thumbnailWidth: 300,
        thumbnailAlignment: 'center',
        thumbnailLabel: { position: 'overImageOnBottom', hideIcons: true },

property type default description min
position string 'overImageOnBottom' Position of the label on the thumbnail.
Possible values: 'overImageOnBottom', 'overImageOnTop', 'overImageOnMiddle', 'onBottom'

align string 'center' Horizontal text alignment.
Possible values: 'right', 'center', 'left'
display boolean true Displays or hides the label (title and description). 1.0
displayDescription boolean false Displays or hides the description. 1.0
align string 'center' Horizontal text alignment.
Possible values: 'right', 'center', 'left'
hideIcons boolean true Hides or displays the icons beside the title. 1.0
titleMaxLength integer 0 Title maximum length to display. 1.0
titleMultiLine boolean false Title can be multiline (not supported with position:'onBottom'). 1.0
title string Variable to set the image title (undescores are replaced by spaces).
Possible values: '%filename', '%filenameNoExt'
titleFontSize string Set the title font size.
Example: titleFontSize: '2em'
descriptionMaxLength integer 0 Description maximum length to display. 1.0
descriptionMultiLine boolean false Description can be multiline (not supported with position:'onBottom'). 1.0
descriptionFontSize string Set the description font size.
Example: descriptionFontSize: '0.8em'

Thumbnail touch and hover effects

These effects are triggered on mouse over or on touch-tap. They are defined with the thumbnailHoverEffect2 parameter.


You can set one or multiple presets to the thumbnailHoverEffect2 with the syntax thumbnailHoverEffect2: 'preset1|preset2|...'

Possible presets:

  • Image: 'imageBlurOn', 'imageBlurOff', 'imageGrayOn', 'imageGrayOff', imageSepiaOn', 'imageSepiaOff', 'imageScale150', 'imageScaleIn80', 'imageScale150Outside', 'imageSlideUp', 'imageSlideDown', 'imageSlideRight', 'imageSlideLeft'
  • Tools: 'toolsAppear', 'toolsSlideDown', 'toolsSlideUp'
  • Label: 'labelAppear', 'labelAppear75', 'labelOpacity50', 'scaleLabelOverImage', 'descriptionAppear', 'labelSlideUpTop', 'labelSlideUp', 'labelSlideDown', 'descriptionSlideUp'
  • Thumbnail: 'scale120'
  • Border: 'borderLighter', 'borderDarker'
  • Misc: 'overScale', 'overScaleOutside', 'slideUp', 'slideDown', 'slideRight', 'slideLeft'

Usage example: thumbnailHoverEffect2: 'borderDarker|labelAppear75'

Advanced usage

For a full control of the effects, use the syntax thumbnailHoverEffect2: 'effect1|effect2|...' where effectN has the syntax [element]_[property]_[fromValue]_[toValue]
view demo on codepen

  • [element]: element to apply the transformation. Possible values: thumbnail, image, label, description, title, tools, customlayer
  • [property]: any css proprety to transform
    • for CSS transform property, just use the transform-function. Limited to: translateX, translateY, rotateX, rotateY, rotateZ, scale
      Example: image_rotateZ_0deg_15deg
    • for CSS filters, just use the visual effect. Limited to: blur, brightness, grayscale, sepia, contrast, opacity, saturate
      Example: 'image_grayscale_0%_100%
  • [fromValue]: initial value
  • [toValue]: value at the end of the transformation

Some examples:

  • One hover effect:
    • Remove the sepia filter on the image: thumbnailHoverEffect2: 'image_sepia_100%_1%'
    • Apply a blur filter on the image: 'image_blur_0.00px_2.00px'
    • Rotate the image from 0degre to 15degre: 'image_rotateZ_0deg_15deg'
    • Apply a grayscale filter the image: 'image_grayscale_0%_100%'
    • Zoom the image in: image_scale_1.00_1.20
    • Zoom the image out: image_scale_1.20_1.00
    • Change the transparency of label background: 'label_backgroundColor_rgba(255,255,255,0.80)_rgba(255,255,255,0.01)'
    • Apply a red colorization on the image: customlayer_backgroundColor_rgba(160,0,0,0.0)_rgba(160,0,0,0.5)
    • Change the transparency of the icons: tools_opacity_1_0.5
    • Change the image contrast: image_contrast_1_4
    • Change the image brightness: image_brightness_1_2
  • Two hover effects:
    • Apply a grayscale filter and rotate the image: thumbnailHoverEffect2:'image_grayscale_0%_100%|image_rotateZ_0deg_15deg'

    Initialization In some case, it's interesting to set CSS properties but without any animation.
    For this, use the option thumbnailBuildInit2: : 'init1|init2|...' where initN has the syntax: [element]_[property]_[Value].
    Example : thumbnailBuildInit2: 'image_scale_1.20'

    Additional tuning

    Fine tuning settings: duration, delay, easing, back duration, back delay, beack easing, hoverin, hoverout, first keyframe
    syntax: thumbnailHoverEffect2: { name: '[effectName]', delay: 0, duration: 400, easing: 'easeOutQuart', delayBack: 0, durationBack: 300, easingBack: 'easeOutQuart', hoverin: true, hoverout: true, firstKeyframe: true }

    • duration: the duration of the effect in ms
    • delay: the delay in ms before the transformation is started
    • easing: specify the rate of change of the transformation over time (see
      • Possible values:
        easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeOutBounce, easeInBack, easeOutBack, easeInOutBack, elastic, bounce
    • durationBack: duration of the effect to initial state, in ms
    • delayBack: start delay back transformation in ms
    • easingBack: easing used for the back transformation
    • hoverin: used on hover in
    • hoverout: used on hover out
    • firstKeyframe: used for chained animations
    Note: name is the only mandatory proprety.
    Some examples:
    • thumbnailHoverEffect2: { name: 'imageBlurOn', duration: 800, easing: 'easeInCubic', delayBack: 0, durationBack: 300, easingBack: 'easeOutQuart' }
    • thumbnailHoverEffect2: { name: 'image_rotateZ_0deg_15deg', duration: 800, durationBack: 500}
    • combination of 2 effects: thumbnailHoverEffect2: [{ name: 'image_scale_1.00_1.20', duration: 500}, { name: 'image_rotateZ_0deg_15deg', delay: 500}]


    Stacks can be added behind thumbnails to create nice hover effects. Their color is defined in the colorScheme.
    Use thumbnailStacks and thumbnailL1Stacks to define then number of stacks.

    The thumbnail animation is applied to the stack, but with a percent value.
    For example, if thumbnailStacksRotateX is set to 0.4, then the 1st stack will have a percent of 0.6 applied to the rotationX value of the thumbnail.
    For the second stack, the percent will be 0.2, for the third one it will be -0,2, and so on.

    Possible parameters to set these percents: 'thumbnailStacksTranslateX', 'thumbnailStacksTranslateY', 'thumbnailStacksTranslateZ', 'thumbnailStacksRotateX', 'thumbnailStacksRotateY', 'thumbnailStacksRotateZ', 'thumbnailStacksScale'

    Thumbnail tools

    Each corner of one thumbnail has a toolbar. You can customize each of these toolbars. Customization is specific for albums and for images.

    property type default description min
    thumbnailToolbarImage object Image toolbars
    Syntax: thumbnailToolbarImage: { topLeft:'', topRight: '', bottomLeft: '', bottomRight: ''}
    Possible tools: 'select', 'share', 'featured', 'download', 'cart', 'info'

    thumbnailToolbarImage : { topLeft: 'select', topRight : 'featured' }
    thumbnailToolbarAlbum object Album toolbars
    Syntax: thumbnailToolbarAlbum: { topLeft:'', topRight: '', bottomLeft: '', bottomRight: ''}
    Possible tools: 'select', 'share', 'counter', 'counter2', 'cart'

    thumbnailToolbarAlbum : { topLeft: 'select', topRight : 'counter' }


    Configure how the user can navigate in albums, filter the thumbnails based on tags, and the touch/tap handling.

    property type default description min
    displayBreadcrumb boolean true Display the breadcrumb for navigation in albums. 1.0
    breadcrumbOnlyCurrentLevel boolean true Display only the name of the current album. 1.0
    breadcrumbAutoHideTopLevel boolean true No breadcrumb on albums first navigation level. 1.0
    breadcrumbHideIcons true Hide or display breadcrumb's icons. 1.0
    galleryFilterTags boolean
    false Display tags to filter the thumbnails.
    Possible values:
    - false: disabled
    - true: enabled
    - 'title': extract the tags from the title (string starting with @)
    - 'description': extract the tags from the description (string starting with @)
    thumbnailLevelUp boolean false Display one thumbnail to navigate in the parent album. 1.0
    locationHash boolean true Enables hash tracking.
    This will activate browser Back/Forward navigation (browser history support) and Deep Linking of images and photo albums.
    Must be enabled to allow sharing of images/albums.
    Note: only one gallery per page should use this feature.
    touchAnimation boolean true Enables thumbnail hover animation on touch event.
    The user must tap a thumbnail twice to show the image or open a album.
    touchAutoOpenDelay integer 0 When a user touch a thumbnail, delay in ms before opening the touched thumbnail.
    Particular values:
    -1= disabled (user needs to tap twice to open the thumbnail),
    0= automatic (the library will calculate automatically the delay).
    Note: the parameter is ignored when touchAnimation=false.
    navigationFontSize string Define the font size for the navigation (breadcrumb and filters).
    Example: navigationFontSize: '1.2em'

    Gallery - first album level specific options

    Settings can be defined specificaly for the first album level (root level) and for the other ones.
    Default settings are used for all album levels (including the first one).
    To use a grid layout for the first level, and a justified layout for all other levels
    thumbnailHeight: 200, thumbnailWidth: 'auto',
    thumbnailL1Height: 300, thumbnailL1Width: 300

    view demo on codepen
    property min
    thumbnailL1Height, thumbnailL1Width 1.0
    thumbnailL1Crop 1.0
    thumbnailL1Label 1.0
    thumbnailL1HoverEffect2 1.0
    galleryL1DisplayMode 1.0
    galleryL1MaxRows 1.0
    galleryL1LastRowFull 1.0
    galleryL1FilterTags 1.0
    galleryL1MaxItems 1.0
    galleryL1Sorting 1.0
    thumbnailL1Stacks 1.2
    thumbnailL1GutterWidth, thumbnailL1GutterHeight 1.2

    Image display - Lightbox

    The lightbox is used to display images in full size.

    All available tools can be displaued in each of the 3 toolbar. Possible tools: 'previousButton', 'pageCounter', 'nextButton', 'playPauseButton', 'fullscreenButton', 'infoButton', 'linkOriginalButton', 'closeButton', 'downloadButton', 'label', 'customN'
    To add custom elements in a toolbar, use the label customN, where N is an integer (e.g. custom1, custom2...).
    property type default description min
    imageTransition string 'swipe' Animation from one image to the next one. Possible values: 'slideAppear', 'swipe'. 1.0
    slideshowAutoStart boolean false Starts automatically the slideshow when an image is displayed. 1.0
    slideshowDelay integer 3000 Duration of the photo display in slideshow mode (in ms). 1.0
    viewerFullscreen boolean false Displays images in fullscreen (on supported browser). 1.0
    viewerToolbar object Display options for the light main toolbar. 1.0
          viewerToolbar.display boolean true Displays/hides the main toolbar. 1.0
          viewerToolbar.position string 'bottomOverImage' Vertical position.
    Possible values: 'top', 'topOverImage', 'bottom', 'bottomOverImage'
          viewerToolbar.align string 'center' Horizontal alignement.
    Possible values: 'left', 'right', 'center'
          viewerToolbar.fullWidth boolean false Toolbar is as width as the screen. 1.0
          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).
    For this toolbar, 'minimizeButton' is additionally available.
    Default value:
    viewerToolbar: { standard :'minimizeButton, label'}
          viewerToolbar.minimized string List of items to display in the minimized toolbar (comma separated).
    For this toolbar, 'minimizeButton' is additionally available.
    Default value:
    viewerToolbar: { standard :'minimizeButton, infoButton, downloadButton, linkOriginalButton, label, fullscreenButton'}
    viewerTools object Tools positionned in the corners. 1.0
          viewerTools.topLeft string Toolbar positioned in the top left corner.
    Default value:
    viewerTools : { topLeft: 'pageCounter, playPauseButton'}
          viewerTools.topRight string Toolbar positioned in the top right corner.
    Default value:
    viewerTools : { topLeft: 'zoomButton, shareButton, closeButton'}
    colorSchemeViewer string
    'dark' Image display color scheme.
    Possible values: 'dark', 'light', 'border'.
    Custom color schemes are supported.
    viewerDisplayLogo boolean false To display a logo.

    Custom icons

    All icons used in the gallery can be customized. By default, an icon font is used.
    Example: replace the default album icon with a red one from Font Awesome:
         icons.thumbnailAlbum: '<i style="color:#e00;" class="fa fa-search-plus"></i>'
    property type default description min
    icons.thumbnailAlbum string '<i class="nGY2Icon icon-folder-empty"></i>' Thumbnail album icon 1.0
    icons.thumbnailImage string '<i class="nGY2Icon icon-picture"></i>' Thumbnail image icon 1.0
    icons.breadcrumbAlbum string '<i class="nGY2Icon icon-folder-empty"></i>' Breadcrum album icon 1.0
    icons.breadcrumbHome string '<i class="nGY2Icon icon-home"></i>' Breadcrumb home icon 1.0
    icons.breadcrumbSeparator string '<i class="nGY2Icon icon-left-open"></i>' Breadcrumb separator icon 1.0
    icons.breadcrumbSeparatorRtl string '<i class="nGY2Icon icon-right-open"></i>' Breadcrumb separator RTL icon 1.0
    icons.navigationFilterSelected string '<i style="color:#bff;" class="nGY2Icon icon-toggle-on"></i>' Navigation - thumbnail filter - selected icon 1.0
    icons.navigationFilterUnselected string '<i class="nGY2Icon icon-toggle-off"></i>' Navigation - thumbnail filter - unselected icon 1.0
    icons.navigationFilterSelectedAll string '<i class="nGY2Icon icon-toggle-off"></i>' Navigation - thumbnail filter - unselect all icon 1.0
    icons.thumbnailSelected string '<i class="nGY2Icon icon-ok-circled"></i>' Thumbnail selection - selected icon 1.0
    icons.thumbnailUnselected string '<i class="nGY2Icon icon-circle-empty"></i>' Thumbnail selection - unselected icon 1.0
    icons.thumbnailFeatured string '<i style="color:#ffa;" class="nGY2Icon icon-star"></i>' Thumbnail - featured icon 1.0
    icons.thumbnailCounter string '<i class="nGY2Icon icon-picture"></i>' Thumbnail - image icon 1.0
    icons.thumbnailShare string '<i class="nGY2Icon icon-share"></i>' Thumbnail - share icon 1.0
    icons.thumbnailDownload string '<i class="nGY2Icon icon-download"></i>' Thumbnail - download icon 1.0
    icons.thumbnailInfo string '<i class="nGY2Icon icon-ngy2_info2"></i>' Thumbnail - info icon 1.0
    icons.thumbnailCart string '<i class="nGY2Icon icon-basket"></i>' Thumbnail - add to shopping cart icon 1.0
    icons.thumbnailDisplay string '<i class="nGY2Icon icon-ngy2_zoom_in2"></i>' Thumbnail - display image icon 1.0
    icons.thumbnailCustomTool[1..10] string 'T1..T10' Thumbnail - custom tool 1 to 10 1.1
    icons.thumbnailAlbumUp string '<i style="font-size: 3em;" class="nGY2Icon icon-level-up"></i>' Thumbnail navigation - album up icon 1.0
    icons.paginationNext string '<i class="nGY2Icon icon-right-open"></i>' Gallery pagination - next page icon 1.0
    icons.paginationPrevious string '<i class="nGY2Icon icon-left-open"></i>' Gallery pagination - previous page icon 1.0
    icons.galleryMoreButton string '<i class="nGY2Icon icon-picture"></i>   <i class="nGY2Icon icon-right-open"></i>' close button icon 1.0
    icons.buttonClose string '<i class="nGY2Icon icon-ngy2_close2"></i>' close button icon 1.0
    icons.viewerPrevious string '<i class="nGY2Icon icon-ngy2_chevron-left"></i>' Lightbox - icon for previous image (toolbar) 1.0
    icons.viewerNext string '<i class="nGY2Icon icon-ngy2_chevron-right"></i>' Lightbox - icon for next image (toolbar) 1.0
    icons.viewerImgPrevious string '<i class="nGY2Icon icon-ngy2_chevron_left3"></i>' Lightbox - icon for previous image (on the left side of the image) 1.0
    icons.viewerImgNext string '<i class="nGY2Icon icon-ngy2_chevron_right3"></i>' Lightbox - icon for next image (on the right side of the image) 1.0
    icons.viewerDownload string '<i class="nGY2Icon icon-ngy2_download2"></i>' Lightbox - icon image download (toolbar) 1.0
    icons.viewerToolbarMin string '<i class="nGY2Icon icon-ellipsis-vert"></i>' Lightbox - icon for minimized toolbar 1.0
    icons.viewerToolbarStd string '<i class="nGY2Icon icon-menu"></i>' Lightbox - icon for maximized toolbar 1.0
    icons.viewerPlay string '<i class="nGY2Icon icon-play"></i>' Lightbox - icon play - to start the slideshow (toolbar) 1.0
    icons.viewerPause string '<i class="nGY2Icon icon-pause"></i>' Lightbox - icon pause - to stop the slideshow (toolbar) 1.0
    icons.viewerFullscreenOn string '<i class="nGY2Icon icon-resize-full"></i>' Lightbox - icon to switch on fullscreen (toolbar) 1.0
    icons.viewerFullscreenOff string '<i class="nGY2Icon icon-resize-small"></i>' Lightbox - icon to switch off fullscreen (toolbar) 1.0
    icons.viewerZoomIn string '<i class="nGY2Icon icon-ngy2_zoom_in2"></i>' Lightbox - icon zoom in (toolbar) 1.0
    icons.viewerZoomOut string '<i class="nGY2Icon icon-ngy2_zoom_out2"></i>' Lightbox - icon zoom out (toolbar) 1.0
    icons.viewerLinkOriginal string '<i class="nGY2Icon icon-ngy2_external2"></i>' Lightbox - icon link to original image (toolbar) 1.0
    icons.viewerInfo string '<i class="nGY2Icon icon-ngy2_info2"></i>' Lightbox - icon infobox (toolbar) 1.0
    icons.viewerShare string '<i class="nGY2Icon icon-ngy2_share2"></i>' Lightbox - icon share link (toolbar) 1.0
    icons.user string '<i class="nGY2Icon icon-user"></i>' Lightbox - icon author (infobox) 1.0
    icons.location string '<i class="nGY2Icon icon-location"></i>' Lightbox - icon location on Google Maps (infobox) 1.0
    icons.config string '<i class="nGY2Icon icon-wrench"></i>' Lightbox - icon config for EXIF (infobox) 1.0
    icons.viewerCustomTool1[1..10] string 'T1..T10' Lightbox - custom tool 1 to 10 1.1
    icons.shareFacebook string '<i style="color:#3b5998;" class="nGY2Icon icon-facebook-squared"></i>' Lightbox - icon Facebook (share popup) 1.0
    icons.shareTwitter string '<i style="color:#00aced;" class="nGY2Icon icon-twitter-squared"></i>' Lightbox - icon Twitter (share popup) 1.0
    icons.shareGooglePlus string '<i style="color:#dd4b39;" class="nGY2Icon icon-gplus-squared"></i>' Lightbox - icon Google plus (share popup) 1.0
    icons.shareTumblr string '<i style="color:#32506d;" class="nGY2Icon icon-tumblr-squared"></i>' Lightbox - icon Tumblr (share popup) 1.0
    icons.sharePinterest string '<i style="color:#cb2027;" class="nGY2Icon icon-pinterest-squared"></i>' Lightbox - icon Pinterest (share popup) 1.0
    icons.shareMail string '<i style="color:#555;" class="nGY2Icon icon-mail-alt"></i>' Lightbox - icon mail-to (share popup) 1.0

    Color schemes

    Color schemes allow you to customize some elements without changing the CSS file.
    Two separated color schemes can be set: one for the gallery (colorScheme), and one for the lightbox (colorSchemeViewer).
    For each one, 2 templates can be used: dark (default valude) and light. You can create your own color scheme.

    To change the backrgound and the boder color of the thumbnails
    1. define one color scheme: var myCS= { thumbnail : { background: '#F00', borderColor: '#F00' } };
    2. assign it to the gallery: colorScheme: myCS

    Gallery color scheme format (with default values):

      navigationBar : { background: 'none', borderTop: '', borderBottom: '', borderRight: '', borderLeft: '' },
      navigationBreadcrumb : { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '6px' },
      navigationFilter : { color: '#ddd', background: '#111', colorSelected: '#fff', backgroundSelected: '#111', borderRadius: '6px' },
      thumbnail : { background: '#000', borderColor: '#000', labelOpacity : 1, labelBackground: 'rgba(34, 34, 34, 0)', titleColor: '#eee', titleBgColor: 'transparent', titleShadow: '', descriptionColor: '#ccc', descriptionBgColor: 'transparent', descriptionShadow: '', stackBackground: '#aaa' },
      thumbnailIcon : { padding: '5px', color: '#fff' },
      pagination : { background: '#111', backgroundSelected: '#666', color: '#fff', borderRadius: '4px', shapeBorder: '3px solid #666', shapeColor: '#444', shapeSelectedColor: '#aaa'}

    Lightbox color scheme format (with default values):

      background: '#000', imageBorder: 'none', imageBoxShadow: 'none',
      barBackground: 'rgba(4, 4, 4, 0.7)', barBorder: '0px solid #111', barColor: '#eee', barDescriptionColor: '#aaa'

    Upgrading from nanoGALLERY

    nanogallery2 comes with an interesting set of new features that should streamline your development experience.

    Due to many enhancements, nanogallery2 is not 100% compatible with nanoGALLERY.
    In particular, the thumbnail hover effects engine has been rewritten: the option thumbnailHoverEffect is now replaced by thumbnailHoverEffect2.
    Here's the list of depreciated and no more supported options.
    property comment
    thumbnailHoverEffect replaced by thumbnailHoverEffect2
    picasaUseUrlCrossDomain no more needed
    albumList replaced by albumList2
    galleryToolbarHideIcons Replaced by breadcrumbHideIcons. Each icon can now be customized with the icons option.
    thumbnail selection is now managed by the thumbnailSelectable option.
    paginationMaxLinesPerPage replaced by galleryMaxRows and galleryL1MaxRows
    paginationDots replaced by galleryPaginationMode
    albumMax replaced by galleryMaxItems and galleryL1MaxItems - ignored for self hosted images.
    replaced by gallerySorting and galleryL1Sorting
    managed automatically
    thumbnailAdjustLastRowHeight is now the standard behaviour
    fnChangeSelectMode use fnThumbnailSelection instead.
    use itemsSetSelectedValue instead.
    getSelectedItems use itemsSelectedGet instead.
    fnViewerInfo No more used. Please replace with toolbar custom buttons (fnImgToolbarCustInit, fnImgToolbarCustClick)
    fnInitGallery replaced and enhanced by fnGalleryRenderStart and fnGalleryRenderEnd
    callbacks comment
    fnViewerInfo No more used. Please replace with toolbar custom buttons (fnImgToolbarCustInit, fnImgToolbarCustClick)
    fnInitGallery replaced and enhanced by fnGalleryRenderStart and fnGalleryRenderEnd
    API methods comment
    getItems Instead, use data to get a pointer to an array containing all the items.
    Example: $('#your_nanogallery2').nanogallery2('data').items;
    getItem replaced by: $('#your_nanogallery2').nanogallery2('data').items[item_index];
    getItemsIndex no more needed

    Tips and tricks

    Recommandations / Performances / FAQ

    Thumbnails hover effects:

    • do not combine too much effects (smooth animation on a computer may be slow on a mobile device).
    Self hosted images:
    • define each thumbnail's size.
    • define each image's size.
    Social sharing
    • Assign an ID to the DIV containing the gallery.
    • Each album and image must have an ID defined.
    • IDs should never been changed.


    By default, HTML tags cannot be used in titles and descriptions of images.
    To enable HTML tags, set the option allowHTMLinData: true.
    Be aware that this could lead to XSS (cross site scripting) vulnerability.