• Registered: 2016-12-15
  • Posts: 1

Topic: JSON Config

Hey everyone,

Apparently in v1.5.0 you can now use JSON as a config instead of XML. I can't find ANY documentation on the formatting needed or anything about this.

I've tried it with a dummy JSON file (which I ran through an XML>JSON convertor) and cleaned it up a bit to see if that would work, but haven't had any luck:

{
    "galleryTitle": "Emmys Red Carpet",
    "image": [
      {
        "imageURL": "/Media/GetMediaImage/950a55b2-c59d-49c8-878b-11dab6649612?anchor=center&mode=crop&width=722&height=1080&rnd=-785658392",
        "thumbURL": "/Media/GetMediaImage/950a55b2-c59d-49c8-878b-11dab6649612?center=0.13,0.49751243781094528&mode=crop&width=105&height=105&rnd=-785658392",
        "caption": "Emilia Clarke"
      },
      {
        "imageURL": "/Media/GetMediaImage/0567378e-5bdd-48f1-84a3-72f62811191d?anchor=center&mode=crop&width=763&height=1080&rnd=40954557",
        "thumbURL": "/Media/GetMediaImage/0567378e-5bdd-48f1-84a3-72f62811191d?anchor=center&mode=crop&width=105&height=105&rnd=40954557",
        "caption": "Giuliana Rancic"
      }
    ]
}

Can anyone shed some light on how to get it working with JSON instead of XML?

Cheer
Nathan

  • Registered: 2012-04-24
  • Posts: 5,924

Re: JSON Config

Apparently in v1.5.0 you can now use JSON as a config instead of XML.

That's right. As of v1.5.0, the Juicebox configuration fie can be JSON instead of XML (noted in this blog post).

It looks like you were just about there... just change your "image" to "images".

Here's a sample JSON configuration file to show the format required:

{
    "useFlickr": "FALSE",
    "galleryTitle": "Gallery Title",
    "textColor": "rgba(255,255,255,1.0)",
    "thumbFrameColor": "rgba(255,255,255,0.5)",
    "showOpenButton": "TRUE",
    "showExpandButton": "TRUE",
    "showThumbsButton": "TRUE",
    "useThumbDots": "TRUE",
    "useFullscreenExpand": "TRUE",
    "images":[
        {
            "imageURL": "images/IMG_0386.jpg",
            "thumbURL": "thumbs/IMG_0386.jpg",
            "linkURL": "images/IMG_0386.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0386",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0156.jpg",
            "thumbURL": "thumbs/IMG_0156.jpg",
            "linkURL": "images/IMG_0156.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0156",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0214.jpg",
            "thumbURL": "thumbs/IMG_0214.jpg",
            "linkURL": "images/IMG_0214.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0214",
            "caption": "Caption Text"
        }
    ]
}

Just be sure to name your JSON file with a .json file extension and point towards it in your gallery's embedding code using the configUrl configuration option, such as:

configUrl: "config.json"