Navigator

Navigator

What is this... it's a little toy to present a photo collection in a different way. Here's the context:

• you have a bunch of photos of the same "place" (maybe a building)
• you want to give people a way to explore those photos that gives some choice (instead of a simple "previous" / "next" button)

What you need to do:

• test

JSON Data structure

Each root-level property should be a unique key for a photo. The value should be an object with the following properties:

• name: the display name for the photo, should be less than 20 chars
• image: the path to the image file (if relative, relative to the page showing the images)
• description: (optional) a more complete description of the photo, should be less than 100 chars
• links: an array of link objects
  • type: the type of link, valid options: "nav"
  • typeClass: the class of the link, valid options: "up", "down", "left", "right"
  • x: the x % position for the link on top of the image. 0 = 0% (far left). 100 = 100% (far right).
  • y: the y % position for the link on top of the image. 0 = 0% (top). 100 = 100% (bottom).
  • target: the string object key of the photo to link to

{
  "photo1KeyValue": {
    "name": "Display Name for Photo 1, Should Be Less Than 20 chars",
    "image": "path/image1filename.jpg",
    "description": "(optional) A more complete description of the photo, should be less than 100 chars",
    "links": [
      {
        "type": "nav",
        "typeClass": "up",
        "x": 45,
        "y" 30,
        "target": "photo2KeyValue"
      }
    ]
  },
  "photo2KeyValue": {
    "name": "Display Name for Photo 2, Should Be Less Than 20 chars",
    "image": "path/image2filename.jpg",
    "description": "(optional) A more complete description of the photo, should be less than 100 chars",
    "links": [
      {
        "type": "nav",
        "typeClass": "up",
        "x": 65,
        "y" 50,
        "target": "photo1KeyValue"
      }
    ]
  }
}

// ka