nanogallery2 - content setup

On this page, you will learn how to configure different kind of media content for your gallery and lightbox.

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

Natively, you can display self hosted images, self hosted videos (WEBM and OGV) and videos hosted on Youtube, Vimeo or Dailymotion, just by listing all your medias individually in your HTML page.

Additionally, you can use an optional module/service which will send the medias to your gallery:
      nanoPhotosProvider2 - for self hosted images, with automatic generation of responsive thumbnails
      Flickr
      Google Photos

Content source is defined on gallery initialization:

Setup example using HTML markup:

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>
    

Setup example using Javascript :

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 features comparison

---

Content definition using HTML markup

For images, videos and albums.

You need one HTML element which contains sub-elements representing the medias. Any kind of markup can be used.
URL to medias and thumbnail's images are extracted from the standard HREF and SRC attributes. Dedicated nanogalley2 data-attributes can be used on all kind of HTML elements:
  - data-ngsrc: URL to big image or video
  - data-ngthumb: URL to thumbnail image
  - data-ngdesc: media description
  ...
Check the markup reference guide for the full list of supported attributes.

Some examples:

Image gallery 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>

          Note: you may use the option itemsBaseURL to define the base URL where medias are stored.

  <div id="my_nanogallery2" data-nanogallery2  >
    <a href="img/img_01.jpg">Title Image 2
      <img src="img/img_01_thumbnail.jpg"/>
    </a>
    <a href="img/img_02.jpg">Title Image 2
      <img src="img/img_02_thumbnail.jpg"/>
    </a>
    <a href="img/img_03.jpg">Title Image 3
      <img src="img/img_03_thumbnail.jpg"/>
    </a>
  </div>

Image gallery with albums view demo on codepen

Albums are defined like images/videos. A thumbnail image is required, but no large image. Must also be set for each album:
  - the kind of the element: 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 that album.

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

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.

<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>
  <a href="my_video.mp4"                data-ngthumb="my_video_thumbnail.jpg"                               >Self hosted</a> 
</div>
    

Video and image gallery

Videos, images and album can be conbined in a single gallery.

<div id="my_nanogallery2" data-nanogallery2 = '{ "itemsBaseURL": "https://mywebserver/gallery/myimages/"}' >
  <a href="https://www.youtube.com/watch?v=Ir098VWCv8Q"                                >Youtube</a>
  <a href="my_video.mp4"                data-ngthumb="my_video_thumbnail.jpg"          >Self hosted video</a> 
  <a href="img_01.jpg"                  data-ngthumb="img_01t.jpg"                     >Title Image1</a>
</div>
    

Lightbox

The lightbox can be used standalone, without gallery. Set the attribute data-nanogallery2-lightbox.

<img 
  src = "thumbnail_image_1.jpg"                                                                   
  data-ngsrc = "big_image_1.jpg"                                                                 
  data-nanogallery2-lightbox = '{ "viewerToolbar": { "display": false } }'        
/>
<img src="thumbnail_image_2.jpg" data-ngsrc="big_image_2.jpg" data-nanogallery2-lightbox />
<img src="thumbnail_image_3.jpg" data-ngsrc="big_image_3.jpg" data-nanogallery2-lightbox />
    

Markup content attributes

This is the list of supported attributes to define one media (image, video or album).

Content definition using Javascript

For images, videos and albums

Images, videos and albums are defined on gallery initialization, using an array of javascript objects.
Check the reference guide for the full list of supported properties.

Some examples:

Image gallery view demo on codepen

<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2").nanogallery2({
      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 view demo on codepen

Albums are defined like images or videos. 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. Must also be set for each album:
  - the property kind: 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.

<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2 ").nanogallery2({
      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 and for self hoset videos, you have to set the URL of the video's thumbnail.
Supported video platforms: Youtube, Vimeo and Dailymotion.

<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2").nanogallery2({
      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 view demo on codepen

Videos, images and album can be conbined in a single gallery.

<div id="my_nanogallery2" data-nanogallery2></div>

<script>
  $(document).ready(function () {
    $("#my_nanogallery2").nanogallery2({
      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>
    

Javascript content settings

This is the list of supported properties for defining one media (image, video or album). The properties are case-sensitive. An item object is an image, a video or an album.

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:
- start by installing nanoPhotosProvider2 on your PHP web server. Follow the installation steps on the nanoPhotosProvider2 homepage.
- then configure your HTML page for displaying 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

Flickr storage

nanogallery2 can display your Flickr albums, 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":           "YOUR_FLICKR_ID",
          "flickrAPIKey":     "YOUR_FLICKR_API_KEY",
          "thumbnailHeight":  150,
          "thumbnailWidth":   150
        }'>      
      </div>
                

• Javascript example

  jQuery("#nanogallery2").nanogallery2({
        kind:             'flickr',
        userID:           'YOUR_FLICKR_ID',
        flickrAPIKey:     'YOUR_FLICKR_API_KEY',
        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

Demonstration:

See the Pen nanogallery2 - Fickr content source by Christophe Brisbois (@Kris-B) on CodePen.

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 NANOGP2 (more here) .

Usage:

1. start by installing NANOGP2 on your PHP web server. Follow the installation steps on the NANOGP2 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 albums are displayed. Image description field is not supported.