nanogallery2



Gallery content










On this page, you will learn how to configure the content of a gallery.

A content source is a place where your images, videos 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 and videos (hosted on Youtube, Vimeo, Dailymotion), just by listing all your medias 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 method:

use the data-nanogallery2 attribute.

HTML markup example
<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 method:

settings are passed to the nanogallery2() function.

Javascript example
$("#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' }
  ]
});
    







Component feature comparison


COMPONENT
feature nanogallery2
 
nanoPhotosProvider2
optional module
Google Photos
optional module
Flickr
optional module
self hosted media
cloud hosted media
easy setup
images
videos
  Youtube, Vimeo, Dailymotion
auto generation of responsive thumbnails (1)
thumbnails dominant colors
(blurred preview image)
navigation in galleries
(filter on tags, breadcrumb)
max number of images unlimited (2) unlimited (2) unlimited (2) unlimited (2)
max album levels unlimited unlimited 2 2
required nanogallery2 version v1.0 v1.3 v1.0 v1.0
(1): thumbnail generation is out of the scope of nanogallery2
(2): large number of images or albums can have negative impact on performances














Media content definition








HTML markup method

for images and videos


Image gallery

Images are defined using the <A> tag and data- attributes.
Note: use the attribut itemsBaseURL to define the base URL where images are stored.
HTML markup example view demo on codepen
<div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
  <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>
    


Gallery with albums

Albums are defined like images using the <A> tag and data- attributes.
Must also be set for each album:
  - the data kind must be set: data-ngkind="album"
  - an unique ID: use the HTML ID attribute or the data-ngid attribute
To assign an item (image, video or album) to an album, use the attribute data-ngalbumid to point to the album.

HTML markup example view demo on codepen
<div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
  <!-- 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>    
    


Video gallery

Videos are defined like images.
Define the URL of each video. Thumbnails are retrieved automatically for Youtube and Dailymotion. For Vimeo, you have to set the URL of the video's thumbnail.
Supported video platforms: Youtube, Vimeo and Dailymotion.
HTML markup example view demo on codepen
<div id="my_nanogallery2" data-nanogallery2>
  <a href="https://www.youtube.com/watch?v=Ir098VWCv8Q"                                                     >Youtube</a>
  <a href="http://www.dailymotion.com/video/x4wtyl6"                                                        >Dailymotion</a>
  <a href="https://vimeo.com/32875422"  data-ngthumb="https://i.vimeocdn.com/video/222726041_1280x720.jpg"  >Vimeo</a>
</div>
    


Video and image gallery

Videos, images and album can be conbined in a single gallery.
HTML markup example
<div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
  <a href="https://www.youtube.com/watch?v=Ir098VWCv8Q"                                                     >Youtube</a>
  <a href="http://www.dailymotion.com/video/x4wtyl6"                                                        >Dailymotion</a>
  <a href="https://vimeo.com/32875422"  data-ngthumb="https://i.vimeocdn.com/video/222726041_1280x720.jpg"  >Vimeo</a>
  <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, video or album).

property default description
data-ngdesc
string
v1.0
Item's description.
data-ngid
integer
v1.0
Item's ID.
MANDATORY if your gallery contains albums -> assign an ID to each item (image and album).
data-ngalbumid
integer
v1.0
ID of the album containing the item.
MANDATORY if your gallery contains albums.
data-ngkind
string
v1.0
"image" Item's kind. Possible values: "image", "album".
data-ngthumb
string
v1.0
URL of the thumbnail image.
Image URL will be used if this parameter is not defined.
data-ngthumbImgHeight
integer
v1.0
0 Height of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
data-ngthumbImgWidth
integer
v1.0
0 Width of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
data-ngimageWidth
integer
v1.0
0 Width of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
data-ngimageHeight
integer
v1.0
0 Height of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
data-ngdest
string
v1.0
Destination URL on thumbnail click (instead of displaying an image/video, the user is redirected to the specified URL).
data-ngimagedominantcolor
string
v1.3
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"
data-ngimagedominantcolors
base64-string
v1.3
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..........."
data-ngcustomData
object
v1.2
Object to store custom data.
Example:
"data-ngcustomData" = '{ "property1": "value1", "property2": "value2" }'
data-ngtags
string
v1.0
Image tags - used for filtering
data-ngexifmodel
string
v1.0
Exif model
data-ngexifflash
string
v1.0
Exif flash
data-ngexiffocallength
string
v1.0
Exif focal length
data-ngexiffstop
string
v1.0
Exif fstop
data-ngexifexposure
string
v1.0
Exif exposure
data-ngexifiso
string
v1.0
Exif ISO
data-ngexiftime
string
v1.0
Exif date/time
data-ngexiflocation
string
v1.0
Exif location - this value is used to display the image location with Google Maps on the image info window.
data-ngdownloadurl
string
v1.2
URL to define a specific image for download







Javascript method

for images and videos


Image gallery

Images are defined on gallery initialization, using javascript objects.
Javascript example view demo on codepen
<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',    // media title
          description:  'Description1'     // media description
        },
        { src: 'image_02.jpg', srct: 'image_02t.jpg',  title: 'Title Image2' },
        { src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'Title Image3' }
      ]
    )};
  )};
</script>
    


Gallery with albums

Albums are defined like images.
Must also be set for each album:
  - the data kind must be set: kind: 'album'
  - an unique ID: use the property ID
To assign an item (image, video or album) to an album, use the property albumID to point to the album.

Javascript example view demo on codepen
<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>
    


Video gallery

Videos are defined like images.
Define the URL of each video. Thumbnails are retrieved automatically for Youtube and Dailymotion. For Vimeo, you have to set the URL of the video's thumbnail.
Supported video platforms: Youtube, Vimeo and Dailymotion.
Javascript example
<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2").nanoGallery({
      items: [
        {
          src:          'https://vimeo.com/32875422',                           // video url
          srct:         'https://i.vimeocdn.com/video/222726041_1280x720.jpg',  // video thumbnail url
          title:        'Vimeo video',                                          // video title
          description:  'Video'                                                 // video description
        },
        { src: 'https://www.youtube.com/watch?v=Ir098VWCv8Q', title: 'Youtube video' },
        { src: 'http://www.dailymotion.com/video/x4wtyl6',    title: 'Dailymotion video' },
      ]
    )};
  )};
</script>
    


Video and image gallery

Videos, images and album can be conbined in a single gallery.
Javascript example view demo on codepen
<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2").nanoGallery({
      items: [
        {
          src:          'https://vimeo.com/32875422',                           // media url
          srct:         'https://i.vimeocdn.com/video/222726041_1280x720.jpg',  // media thumbnail url
          title:        'Vimeo video',                                          // media title
          description:  'Video'                                                 // media description
        },
        { src: 'https://www.youtube.com/watch?v=Ir098VWCv8Q', title: 'Youtube video' },
        { src: 'http://www.dailymotion.com/video/x4wtyl6',    title: 'Dailymotion video' },
        { src: 'image_01.jpg',      srct: 'image_01ts.jpg',   title: 'Title Image' }
      ]
    )};
  )};
</script>
    



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 default description
title
string
v1.0
Title of the item.
description
string
v1.0
Description of the item
kind
string
v1.0
'image' Type of the item. Possible values: 'image', 'album'.
ID
integer
v1.0
Item ID.
MANDATORY if your gallery contains albums -> assign an ID to each item (image and album).
albumID
integer
v1.0
ID of the album containing the item.
MANDATORY if your gallery contains albums.
tags
string
v1.0
Tags of the element - used for filtering.
destURL
string
v1.0
Destination URL on thumbnail click (instead of displaying an image/video, the user is redirected to the specified URL).
src
string
v1.0
URL of the image.
height
integer
v1.0
0 Height of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
width
integer
v1.0
integer Width of the image (in pixels).
Not mandatory, but should be defined to improve overall performances.
srct
string
v1.0
URL of the thumbnail image.
Image URL will be used if this parameter is not defined.
imgtHeight
integer
v1.0
0 Height of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
imgtWidth
integer
v1.0
0 Width of the thumbnail image (in pixels).
Not mandatory, but should be defined to improve overall performances.
imageDominantColor
string
v1.3
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'
imageDominantColors
string
v1.3
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..................'
customData
object
v1.0
Object to store custom data.
Example:
{src: 'img.jpg', srct: 'imgt.jpg', title: 'image01', customData:{prop1: val1, prop1: val2} }
exifModel
string
v1.0
Exif model
exifFlash
string
v1.0
Exif flash
exifFocalLength
string
v1.0
Exif focal length
exifFStop
string
v1.0
Exif fstop
exifExposure
string
v1.0
Exif exposure
exifIso
string
v1.0
Exif ISO
exifTime
string
v1.0
Exif date/time
exifLocation
string
v1.0
Exif location - this value is used to display the image location with Google Maps on the image info window.
downloadURL
string
v1.2
URL to define a specific image for download














Optional modules for automatic content fetching








nanoPhotosProvider2

For images and albums stored on your PHP webserver.


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 and mosaic) 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 default description
kind
string
v1.3
MANDATORY
Storage type. Must be set to 'nano_photos_provider2' to access nanoPhotosProvider2 data.
dataProvider
string
v1.3
MANDATORY
URL of your nanoPhotosProvider2 installation.
Example:
dataProvider: 'http://mywebsever.com/nano_photos_provider2/nano_photos_provider2.php'
blackList
string
v1.4
List of keywords to ignore - album's name containing one of the keywords in the title will be ignored.
Keyword separator is |
whiteList
string
v1.4
List of keywords to authorize - album's name must contain one of the keywords to be displayed.
Keyword separator is |
album
photoset
string
v1.4
To display only the content (=the images) of one specific album/folder.

note: 'photoset' is an alias of 'album'
albumList2
stringarray
v1.4
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']







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 default description
kind
string
v1.0
MANDATORY
Storage type. Must be set to 'flickr' to access Flickr data.
userID
string
v1.0
MANDATORY
The Flickr user account ID.

To retrieve your Flickr user ID: use this page
album
photoset
string
v1.0
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'
blackList
string
v1.0
List of keywords to ignore - albums containing one of the keywords in the title will be ignored.
Keyword separator is |
whiteList
string
v1.0
List of keywords to authorize - albums must contain one of the keywords to be displayed.
Keyword separator is |
albumList2
stringarray
v1.0
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']
flickrSkipOriginal
boolean
v1.0
true Do not display the original uploaded image (e.g. to avoid rotation issue).
thumbnailOpenOriginal
boolean
v1.0
false Displays the original image in Flickr, without opening the lightbox.
thumbnailCropScaleFactor
decimal
v1.0
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.







Google Photos 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 default description
kind
string
v1.0
MANDATORY
Storage type. Must be set to 'google2' to access Google Photos data.
userID
string
v1.0
MANDATORY
The Google Photos / Google+ user account ID.
google2URL
string
v1.0
MANDATORY
The URL pointing to your nanogp installation.
Example:
google2URL: 'https://mywebsever/nanogp/nanogp.php'
album
string
v1.0
To display the content (= the photos) of one single album.
Set the Album ID.
Example: album: '5851968929721015169'

Private albums - no more available since Google API changed
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.
albumList2
stringarray
v1.0
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 - no more available since Google API changed
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.
blackList
string
v1.0
'scrapbook|profil' List of keywords to ignore - album's name containing one of the keywords in the title will be ignored.
Keyword separator is |
whiteList
string
v1.0
List of keywords to authorize - album's name must contain one of the keywords to be displayed.
Keyword separator is |
viewerZoom
boolean
v1.0
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.
thumbnailCropScaleFactor
decimal
v1.0
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.