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 album on your computer. 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 should work using any modern browser.

SEO support has been a concern with these Javascript-generated skins. Our solution is to add the include-file "seodatatags.inc" to jAlbum. It generates plain HTML for the album and removes it using Javascript when viewing the page. But we're not sure that this is the best way. Is there a better way? Should it generate better/other HTML? Should the removal be done differently?

I have attached a beta version of a skin that uses this new system. This skin should be the "Minimal"-version of this JSON-system, and work as a template of how one can use this data. I need input on this one too. What is missing and what does not work? (I know that video support is a bit rough. The slide-navigation can be blocked with some combinations of window- and video-sizes.) And the skin does not support paging. And I'm not a designer, so can the css be improved to make it look nicer?