nanogallery2 nanogallery2




nanogallery2 - gallery content sources










On this page, you will see how data sources are defined.

A data source is a place where your images and albums are stored. As for nanogallery2's settings, definition can be made with HTML markup or can be passed to the nanogallery2() function.


Multiple data sources are natively supported.
For self hosted photos:
      set parameters for each individual photo (see markup or javascript)
      or use nanoPhotosProvider2 (just point to your web server)
For cloud storage:
      Flickr
      Google Photos

Data source is defined on gallery initialization:

Example with HTML markup:

use the data-nanogallery2 attribute.

<div data-nanogallery2='{
    "kind":         "nanoPhotosProvider2",
    "dataProvider": "http://mywebsever.com/nano_photos_provider2.php",
    ...
  }'>
</div>
    

or, with javascript:

settings are passed to the nanogallery2() function.

$("#my_nanogallery2").nanogallery2({
  kind:         'nanoPhotosProvider2',
  dataProvider: 'http://mywebsever.com/nano_photos_provider2.php',
  ...
});
      
    





Content source comparison


feature cloud
Google Photos
cloud
Flickr
self hosted
markup or javascript
self hosted
nanoPhotosProvider2
display images
display videos - - (1) -
image title
image description -
auto thumbnails generation - (2)
automatic responsive thumbnails - (2)
thumbnails dominant colors
(blurred preview image)
- -
Custom links - -
filter on tags
breadcrumb
max number of images unlimited (3) unlimited (3) unlimited (3) unlimited (3)
max album levels 2 2 unlimited unlimited
no dependency to any external service - -
auto mobile sync - -
minimum nanogallery2 version v1.0 v1.0 v1.0 v1.3
(1): with a third-party lightbox.
(2): thumbnail generation is out of the scope of nanogallery2.
(3): large number of images or albums can have negative impact on performances.







Self hosted data - HTML markup method


Live examples:

    demo - image gallery (markup)

    demo - gallery with albums (markup)


Elements (images and albums) are defined using the <A> tag and data- attributs.
Example:
<div id="my_nanogallery2" data-nanogallery2>
  <a href="img_01.jpg" data-ngthumb="img_01t.jpg"  data-ngdesc="Description1"        >Title Image1</a>
  <a href="img_02.jpg" data-ngthumb="img_02ts.jpg" data-ngdesc="Image 2 description" >Title Image2</a>
  <a href="img_03.jpg" data-ngthumb="img_03t.jpg"                                    >Title Image3</a>
</div>
      

For albums, you need to define a kind and an ID for each element.
Default kind is 'photo'. Use the attribut data-ngid for an element ID, and data-ngalbumid for an album ID.
Example:
<div id="my_nanogallery2" data-nanogallery2>
  <!-- first album -->
  <a href=""           data-ngkind="album" data-ngid="1"                     data-ngthumb="img01Ta.jpg">Album A</a>
  <a href="img02a.jpg"                     data-ngid="10" data-ngalbumid="1" data-ngthumb="img02Ta.jpg">Image 1 / album A</a>
  <a href="img03a.jpg"                     data-ngid="11" data-ngalbumid="1" data-ngthumb="img03Ta.jpg">Image 2 / album A</a>

  <!-- second album -->
  <a href=""          data-ngkind="album" data-ngid="2"                     data-ngthumb="image_02t.jpg">Album B</a>
  <a href="img02.jpg"                     data-ngid="20" data-ngalbumid="2" data-ngthumb="img02T.jpg"   >Image1</a>
  <a href="img03.jpg"                     data-ngid="21" data-ngalbumid="2" data-ngthumb="img03T.jpg"   >Image2</a>
  <a href="img04.jpg"                     data-ngid="22" data-ngalbumid="2" data-ngthumb="img04T.jpg"   >Image3</a>
</div>    
      

Note: use the attribut itemsBaseURL to define the base URL where images are stored.
Example:
<div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "http://mywebserver/gallery/myimages/"}' >
  <a href="img_01.jpg" data-ngthumb="img_01t.jpg">Title Image1</a>
  ...
</div>
      

This is the list of supported attributes (case-sensitive) to define one item (image or album). All values must be defined between double-quotes, even if the content is not a string.

property type default description min
version
data-ngdesc string Element description. 1.0
data-ngid integer Item ID.
MANDATORY if your gallery contains albums: assign an ID to each item (image and album).
1.0
data-ngalbumid integer ID of the album containing the item.
MANDATORY if your gallery contains albums.
1.0
data-ngkind string 'image' Item's kind. Possible values: 'image', 'album'. 1.0
data-ngthumb string URL of the thumbnail image.
Image URL will be used if this parameter is not defined.
1.0
data-ngthumbImgHeight integer 0 Height of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
data-ngthumbImgWidth integer 0 Width of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
data-ngimageWidth integer 0 Width of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
data-ngimageHeight integer 0 Height of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
data-ngdest string Destination URL on thumbnail click (instead of displaying an image, the user is redirected to the specified URL). 1.0
data-ngimagedominantcolor string Thumbnail's image dominant color. RGB value in HEX-format.
This color is used as background for thumbnail images. It may be visible before an image is fully displayed.
Example:
"data-ngimagedominantcolor": "#808080"
1.3
data-ngimagedominantcolors base64-string Thumbnail's image dominant colors (gradient/blurred image).
Set a very small base64 encoded GIF image.
This color is used as background for thumbnail images. It may be visible before an image is fully displayed.
Example:
"data-ngimagedominantcolors": "data:image/gif;base64,R0lGODdhAwADAOMAAMnjXJi..........."
1.3
data-ngcustomData object Object to store custom data.
Usage example: data-ngcustomData='{"property1": "value1", "property2": "value2"}'
1.2
data-ngtags string Image tags 1.0
data-ngexifmodel string Exif model 1.0
data-ngexifflash string Exif flash 1.0
data-ngexiffocallength string Exif focal length 1.0
data-ngexiffstop string Exif fstop 1.0
data-ngexifexposure string Exif exposure 1.0
data-ngexifiso string Exif ISO 1.0
data-ngexiftime string Exif date/time 1.0
data-ngexiflocation string Exif location - this value is used to display the image location with Google Maps on the image info window. 1.0
data-ngdownloadurl string URL to define a specific image for download 1.2







Self hosted data - javascript method


Live examples:

    demo - image gallery (javascript)

    demo - gallery with albums (javascript)


Define the elements on gallery initialization.
Example:
<div id="my_nanogallery2" data-nanogallery2></div>

<script>
$(document).ready(function () {
  $("#my_nanogallery2").nanoGallery({
    items: [
      {
        src:          'image_01.jpg',    // image url
        srct:         'image_01ts.jpg',  // thumbnail url
        title:        'Title Image1',    // element title
        description:  'Description1'     // element description
      },
      { src: 'image_02.jpg', srct: 'image_02t.jpg',  title: 'Title Image2' },
      { src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'Title Image3' }
    ]
  )};
)};
</script>
      


For albums, you need to define a kind and an ID for each element.
Default kind is 'photo'. Use the option ID for an element ID, and albumID for an album ID.
Example:
<div id="my_nanogallery2" data-nanogallery2></div>

<script>
$(document).ready(function () {
  $("#my_nanogallery2 ").nanoGallery({
    items: [
      // album 1
      { src: 'image_01.jpg',                         title: 'album A',  ID: 1,	kind:'album' },
      { src: 'image_01.jpg', srct: 'image_01ts.jpg', title: 'image A1', ID: 10, albumID: 1 },
      { src: 'image_02.jpg', srct: 'image_02ts.jpg', title: 'image A2', ID: 11, albumID: 1 },
      { src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'image A3', ID: 12, albumID: 1 },
      
      // album 2
      {	src: 'image_02.jpg',                         title: 'album B',  ID: 2,  kind:'album' },
      { src: 'image_01.jpg', srct: 'image_01ts.jpg', title: 'image B1', ID: 20, albumID: 2 },
      { src: 'image_02.jpg', srct: 'image_02ts.jpg', title: 'image B2', ID: 21, albumID: 2 },
      { src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'image B3', ID: 22, albumID: 2 }
    ]
  )};
)};
</script>
      

Note: use the option itemsBaseURL to define the base URL where images are stored.

This is the list of supported properties to define one item (image or album). The properties are case-sensitive. An item object is an image or an album.

property type default description min
version
title string Title of the element. 1.0
description string Description of the element 1.0
kind string 'image' Type of the item. Possible values: 'image', 'album'. 1.0
ID integer Item ID.
MANDATORY if your gallery contains albums: assign an ID to each item (image and album).
1.0
albumID integer ID of the album containing the item.
MANDATORY if your gallery contains albums.
1.0
tags string Tags of the element. 1.0
destURL string Destination URL on thumbnail click (instead of displaying an image, the user is redirected to the specified URL). 1.0
src string URL of the image. 1.0
height integer 0 Height of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
width integer 0 Width of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
srct string URL of the thumbnail image.
Image URL will be used if this parameter is not defined.
1.0
imgtHeight integer 0 Height of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
imgtWidth integer 0 Width of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
1.0
imageDominantColor string Thumbnail's image dominant color. RGB value in HEX-format.
This color is used as background for thumbnail images. It may be visible before an image is fully displayed.
Example:
imageDominantColor: '#808080'
1.3
imageDominantColors string Thumbnail's image dominant colors (gradient/blurred image).
Set a very small base64 encoded GIF image.
This color is used as background for thumbnail images. It may be visible before an image is fully displayed.
Example:
imageDominantColors: 'data:image/gif;base64,R0lGODdhAwADAOMAAMnjXJi..................'
1.3
customData object Object to store custom data.
Usage example: '{src: 'img.jpg', srct: 'imgt.jpg', title: 'image01', customData:{prop1: val1, prop1: val2} }'
1.0
exifModel string Exif model 1.0
exifFlash string Exif flash 1.0
exifFocalLength string Exif focal length 1.0
exifFStop string Exif fstop 1.0
exifExposure string Exif exposure 1.0
exifIso string Exif ISO 1.0
exifTime string Exif date/time 1.0
exifLocation string Exif location - this value is used to display the image location with Google Maps on the image info window. 1.0
downloadURL string URL to define a specific image for download 1.2
1.0







nanoPhotosProvider2


nanoPhotosProvider2 is a PHP application for your webserver. It provides images and albums automatically to nanogallery2.
Thumbnails for all nanogallery2 layouts (grid, justified, cascading) are automatically generated.
Blurred preview images are used for a really nice effect.

      visit nanoPhotosProvider2 homepage

Usage example:
<div id="nanogallery2" data-nanogallery2='{
    "kind":             "nano_photos_provider2",
    "dataProvider":     "http://mywebsever.com/mypath/nano_photos_provider2/nano_photos_provider2.php",
    "thumbnailHeight":  150,
    "thumbnailWidth":   150
  }'>      
</div>
      
property type default description min
version
kind string MANDATORY
Storage type. Must be set to 'nano_photos_provider2' to access nanoPhotosProvider2 data.
1.3
dataProvider string MANDATORY
URL of your nanoPhotosProvider2 installation.
Example:
dataProvider: 'http://mywebsever.com/mypath/nano_photos_provider2/nano_photos_provider2.php'
1.3
blackList string List of keywords to ignore - album's name containing one of the keywords in the title will be ignored.
Keyword separator is |
1.4
whiteList string List of keywords to authorize - album's name must contain one of the keywords to be displayed.
Keyword separator is |
1.4
album
photoset
string To display only the content (=the images) of one specific album/folder.

note: 'photoset' is an alias of 'album'
1.4
albumList2 string
array
The list of albums to display.
Use a string to set a single album, or an array for multiple albums.
Example:
One album: albumList2: 'architecture'
Three albums: albumList2: ['architecture', 'friends', 'into the wild']
1.4







Google Photos / Google+ storage


nanogallery2 can display the content of the albums you have created on Google Photos.

This feature is provided "as-is". nanogallery2 is not affiliated to Google. Changes by Google may affect your galleries. nanogallery2 can not be held responsible for any issue caused by any change on Google Photos.

Note: since february 9, 2017, Google Photos can no more be accessed without account owner's explicit authorization.
nanogallery2 requires a permanent authorization, which is only possible for server side applications.
To solve this issue, you need to use the server module nanogp (more here) .


By default, all your non shared albums are displayed.
property type default description min
version
kind string MANDATORY
Storage type. Must be set to 'google2' to access Google Photos data.
1.0
userID string MANDATORY
The Google Photos / Google+ user account ID.
1.0
google2URL string MANDATORY
The URL pointing to your nanogp installation.
Example:
google2URL: 'https://mydomain/nanogp/nanogp.php'
1.0
album string To display the content (= the photos) of one single album.
Set the Album ID.
Example: album: '5851968929721015169'

Private albums
To display the images contained in a private album, you'll need the authKey. It can be found in the tool   nanoGPVisibility   .
Usage example:
album: '5851968929721015169&authkey=CJSlhdKSgoiXtgE' : this will display only the content of the specified private album.

Note: locationHash is automatically disabled when using private albums.
1.0
albumList2 string
array
The list of albums to display. You can specify an album name or it's ID.
Use a string to set a single album, or an array for multiple albums.
Example:
One album: albumList2: 'architecture'
Three albums: albumList2: ['architecture', 'friends', '5851968929721015169']

Private albums
Google Photos private album can also be displayed with nanogallery2.
The authKey of the private albums is required. It can be found in the tool   nanoGPVisibility   .
Usage example:
albumList2: '5851968929721015169&authkey=CJSlhdKSgoiXtgE'

Note: locationHash is automatically disabled when using private albums.
1.0
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 |
1.0
whiteList string List of keywords to authorize - album's name must contain one of the keywords to be displayed.
Keyword separator is |
1.0
viewerZoom boolean true Enables/disables image zoom in lightbox
If disabled, then the image size corresponding to the user screen resolution will be downloaded, instead of the full-resolution one.
1.0







Flickr storage


nanogallery2 can display your Flickr albums, or the content of a specific album, or your full photostream.

This feature is provided "as-is". nanogallery2 is not affiliated to Flickr. Changes by Flickr may affect your galleries. nanogallery2 can not be held responsible for any issue caused by any change on Flickr.
property type default description min
version
kind string MANDATORY
Storage type. Must be set to 'flickr' to access Flickr data.
1.0
userID string MANDATORY
The Flickr user account ID.

To retrieve your Flickr user ID: use this page
1.0
album
photoset
string Photoset ID - to display only the content (=the images) of one specific photoset.
If set to 'none', all pictures of the photostream are displayed.
note: 'photoset' is an alias of 'album'
1.0
blackList string List of keywords to ignore - albums containing one of the keywords in the title will be ignored.
Keyword separator is |
1.0
whiteList string List of keywords to authorize - albums must contain one of the keywords to be displayed.
Keyword separator is |
1.0
albumList2 string
array
The list of albums to display. You can specify an album name or it's ID.
Use a string to set a single album, or an array for multiple albums.
Example:
One album: albumList2: 'architecture'
Three albums: albumList2: ['architecture', 'friends', '5851968929721015169']
1.0
flickrSkipOriginal boolean true Do not display the original uploaded image (e.g. to avoid rotation issue). 1.0
thumbnailOpenOriginal boolean false Displays the original image in Flickr, without opening the lightbox. 1.0