nanogallery2



nanogallery2 - gallery content sources










On this page we'll see how the data sources can be 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.

Data source is defined on gallery initialization:

with HTML markup:

use the data-nanogallery2 attribute.

      <div data-nanogallery2='{
          "kind": "flickr",
          "userID": "[email protected]",
          ...
        }'>
      </div>
    

or, with javascript:

settings are passed to the nanogallery2() function.

      $("#my_nanogallery2").nanogallery2({
        kind: 'flickr',
        userID: [email protected]',
        ...
      });
      
    





Content source comparison


feature cloud
Google Photos
cloud
Flickr
self hosted
markup or javascript
self hosted
nanoPhotosProvider
no dependency to any external service - -
display images
display videos - - (1) (1)
image title
image description -
auto thumbnails generation *(2)
auto responsive thumbnails *(2) limited
Custom links - -
filter on tags
breadcrumb
max images unlimited *(3) unlimited *(3) unlimited *(3) unlimited *(3)
max album levels 2 2 unlimited unlimited
auto mobile sync - -
min nanogallery2 version 1.0 1.0 1.0 not supported
at this time
*(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


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. 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 defined URL). 1.0
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


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.

Demonstrations: demo images demo albums

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 defined 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. 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
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







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
1.0
1.0







nanoPhotosProvider


not supported at this time.