nanogallery2 nanogallery2



gallery content source










On this page, you will learn how to configure a content source.

A content 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.


Natively, you can display self hosted images, just by listing all your images individually in your HTML page.

Additionally, you can use an optional module for displaying images :
      with automatic generation of responsive thumbnails from your web server: nanoPhotosProvider2
      from Flickr
      from Google Photos


Content source is defined on gallery initialization:

HTML markup example:

use the data-nanogallery2 attribute.

<div data-nanogallery2 = '{
    <!-- ### gallery settings ### -->
    "thumbnailHeight":  150,
    "thumbnailWidth":   150,
    "itemsBaseURL":     "http://nanogallery2.nanostudio.org/samples/"
  }'>

  <!-- ### gallery content ### -->
  <a href="img_01.jpg" data-ngthumb="img_01t.jpg">Title Image 1</a>
  <a href="img_02.jpg" data-ngthumb="img_02t.jpg">Title Image 2</a>
  <a href="img_03.jpg" data-ngthumb="img_03t.jpg">Title Image 3</a>
</div>
    

Javascript example:

settings are passed to the nanogallery2() function.

$("#my_nanogallery2").nanogallery2({
  <!-- ### gallery settings ### -->
  thumbnailHeight:  150,
  thumbnailWidth:   150,
  itemsBaseURL:     'http://nanogallery2.nanostudio.org/samples/',

  <!-- ### gallery content ### -->
  items: [
      { src: 'img_01.jpg', srct: 'img_01t.jpg', title: 'Title Image 1' },
      { src: 'img_02.jpg', srct: 'img_02t.jpg', title: 'Title Image 2' },
      { src: 'img_03.jpg', srct: 'img_03t.jpg', title: 'Title Image 3' }
  ]
});
    





Content source comparison


self hosted cloud
feature markup or javascript
 
nanoPhotosProvider2
optional module
Google Photos
optional module
Flickr
optional module
easy setup
no dependency to any external service
display images
display videos (1)
auto generation of responsive thumbnails (2)
thumbnails dominant colors
(blurred preview image)
navigation in galleries
(filter on tags, breadcrumb)
max number of images unlimited (3) unlimited (3) unlimited (3) unlimited (3)
max album levels unlimited unlimited 2 2
required nanogallery2 version v1.0 v1.3 v1.0 v1.0
(1): with a third-party lightbox see example on codepen
(2): thumbnail generation is out of the scope of nanogallery2
(3): large number of images or albums can have negative impact on performances







Images hosted on your web server








Self hosted images - 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.
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 images - 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.
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







Self hosted images - nanoPhotosProvider2


nanoPhotosProvider2 is a PHP application for your webserver. Very easy to setup, 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.

Usage:
  1. start by installing nanoPhotosProvider2 on your PHP web server. Follow the installation steps on the nanoPhotosProvider2 homepage.
  2. then configure your HTML page to display the gallery:

    - HTML markup example:
    <div id="nanogallery2" data-nanogallery2='{
        "kind":             "nano_photos_provider2",
        "dataProvider":     "http://mywebsever.com/nano_photos_provider2/nano_photos_provider2.php",
        "thumbnailHeight":  150,
        "thumbnailWidth":   150
      }'>      
    </div>
              
    - Javascript example:
    jQuery("#nanogallery2").nanogallery2({
      kind:             'nano_photos_provider2',
      dataProvider:     'http://mywebsever.com/nano_photos_provider2/nano_photos_provider2.php',
      thumbnailHeight:  150,
      thumbnailWidth:   150
    });
              

This is an optional module. To use it, include in your HTML page:

  • jquery.nanogallery2.core.min.js and jquery.nanogallery2.data_nano_photos_provider2.min.js
  • or just jquery.nanogallery2.min.js

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














Images hosted in the cloud








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.

  • HTML markup example:
    <div id="nanogallery2" data-nanogallery2='{
        "kind":             "flickr",
        "userID":           "[email protected]",
        "thumbnailHeight":  150,
        "thumbnailWidth":   150
      }'>      
    </div>
              
  • Javascript example:
    jQuery("#nanogallery2").nanogallery2({
      kind:             'flickr',
      userID:           '[email protected]',
      thumbnailHeight:  150,
      thumbnailWidth:   150
    });
              


This is an optional module. To use it, include in your HTML page:

  • jquery.nanogallery2.core.min.js and jquery.nanogallery2.data_flickr.min.js
  • or just jquery.nanogallery2.min.js

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
thumbnailCropScaleFactor decimal 1.5 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.
1.0







Google Photos / Google+ storage


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

The setup of this optional module requires advanced javascript skills.

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



Usage:
  1. start by installing NANOGP on your PHP web server. Follow the installation steps on the NANOGP homepage.
  2. then configure your HTML page to display a gallery.

    - HTML markup example:
    <div id="nanogallery2" data-nanogallery2='{
        "kind":             "google2",
        "userID":           "111186676244625461692",
        "google2URL":       "https://YOUR_WEB_SERVER/nanogp/nanogp.php",
        "thumbnailHeight":  150,
        "thumbnailWidth":   150
      }'>      
    </div>
              
    - Javascript example:
    jQuery("#nanogallery2").nanogallery2({
      kind:             'google2',
      userID:           '111186676244625461692',
      google2URL:       'https://YOUR_WEB_SERVER/nanogp/nanogp.php',
      thumbnailHeight:  150,
      thumbnailWidth:   150
    });
              


This is an optional module. To use it, include in your HTML page:

  • jquery.nanogallery2.core.min.js and jquery.nanogallery2.data_google2.min.js
  • or just jquery.nanogallery2.min.js


By default, all your non shared albums are displayed.
Image description field is not supported.
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://mywebsever/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
thumbnailCropScaleFactor decimal 1.5 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.
1.0