JSON data

Are you familiar with JSON, Ajax, jQuery and Javascript? Since jAlbum 12.2 you can create skins that uses JavaScript to read files with JSON data about the album, instead of having to learn the jAlbum specific Tags and Variables in index.htt and slide.htt.

Just add an empty data-config.json file to the root of the skin and jAlbum will generate all the JSON files you need:

• In the root of the final album a tree.json file is added, containing all folder data for the entire album.
• For each folder in the final album a number of dataN.json files will be added, where N is the paging number, starting with 1.

Quick example

Create an album with the image "Clock.jpg" in the root and one folder called "Nature" with "Horses.jpg":

Add a data-config.json file to the root of the skin that looks like this:

{"paging":0}

jAlbum will then generate these files (depending on the metadata in the images):

tree.json:

{
  "path": "JSON-example",
  "folders": [
    {
      "path": "Nature",
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z"
    }
  ],
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

data1.json:

{
  "path": "JSON-example",
  "deepCounters": {
    "total": 3,
    "images": 2,
    "folders": 1,
    "files": 2
  },
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "album": {
    "description": "Minimal JSON album."
  },
  "objects": [
    {
      "path": "Clock.jpg",
      "image": {
        "path": "slides\/Clock.jpg",
        "width": 900,
        "height": 668
      },
      "creator": "Laza",
      "thumb": {
        "path": "thumbs\/Clock.jpg",
        "width": 216,
        "height": 160
      },
      "fileSize": 78560,
      "name": "Clock.jpg",
      "rating": 4,
      "fileDate": "2013-07-02T12:56:42.0Z",
      "category": "image",
      "title": "Clock",
      "camera": {
        "aperture": 4.5,
        "exposureTime": "1\/50s",
        "originalDate": "2009-08-09T15:46:18.0Z",
        "cameraModel": "Canon EOS 1000D",
        "focusDistance": "0.26m",
        "focalLength35mm": "29.2mm",
        "cameraMake": "Canon",
        "isoEquivalent": 400,
        "flash": "Flash did not fire, auto",
        "focalLength": "18.0mm"
      }
    },
    {
      "path": "Nature",
      "deepCounters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z",
      "category": "folder"
    }
  ],
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

Nature/data1.json:

{
  "path": "Nature",
  "deepCounters": {
    "total": 1,
    "images": 1,
    "files": 1
  },
  "counters": {
    "total": 1,
    "images": 1,
    "files": 1
  },
  "thumb": {
    "path": "Nature\/thumbs\/Horses.jpg",
    "width": 232,
    "height": 160
  },
  "album": {
    "description": "Minimal JSON album."
  },
  "objects": [
    {
      "path": "Horses.jpg",
      "image": {
        "path": "slides\/Horses.jpg",
        "width": 900,
        "height": 621
      },
      "thumb": {
        "path": "thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "fileSize": 167212,
      "name": "Horses.jpg",
      "rating": 4,
      "fileDate": "2013-07-02T13:08:20.0Z",
      "category": "image",
      "title": "Horses",
      "camera": {
        "aperture": 4.5,
        "exposureTime": "1\/800s",
        "originalDate": "2012-12-27T12:20:49.0Z",
        "cameraModel": "XZ-1",
        "focusDistance": "155.0m",
        "focalLength35mm": "77.0mm",
        "cameraMake": "OLYMPUS IMAGING CORP.",
        "isoEquivalent": 100,
        "flash": "Flash did not fire, auto",
        "focalLength": "16.6mm"
      }
    }
  ],
  "name": "Nature",
  "fileDate": "2015-02-12T15:57:07.0Z"
}

The format of these files are in reality compact and are prettified here for readabiliity.

If you use jQuery you can now read for example tree.json using

$.ajax({
	type: "GET",
	dataType: 'json',
	url: 'tree.json'
})
.done(function(data) {/* Process the data here! */});

Some browsers (for example Google Chrome) unfortunately blocks Ajax calls if previewing the local album. Either switch to another browser or Google on how to set the Google Chrome --allow-file-access-from-files flag. Using the built in browser in jAlbum will also work. And if you publish your album to a webserver it will work using any modern browser.

Todo:

• Complete JSON spec.
• SEO support in using seodatatags.inc.
• Include downloadable examples.