This page demonstrates an absolute bare minimum JSON configuration file. The only part of the JSON file which exists in this demo is the array containing the timeline node data. If you look at the JSON below, you'll notice that this .json file doesn't even have field names. There's no meta data (e.g. timeline name or last updated date), no JSON field names, and no other settings or options. The timelines node items themselves contain just 3 fields: date, heading, and content. Of course, if you use this method to pass JSON data, your timeline will have minimal styling and functionality and use only default settings.
Note: the outer container with the rounded, black border was added for the demo. This will not appear on your timeline.
<div class="timeline" data-json-config="assets/data/simple-data-array.json">
<div class="timeline__wrap">
<div class="timeline__items"></div>
</div>
</div>
[
{
"date": "5 Million B.C.",
"heading": "Item 1",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "4.6 Million B.C.",
"heading": "Item 2",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "4.2 Million B.C.",
"heading": "Item 3",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "3.9 Million B.C.",
"heading": "Item 4",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "3.5 Million B.C.",
"heading": "Item 5",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "3 Million B.C.",
"heading": "Item 6",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "2.6 Million B.C.",
"heading": "Item 7",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "2.1 Million B.C.",
"heading": "Item 8",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "1.8 Million B.C.",
"heading": "Item 9",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "1.3 Million B.C.",
"heading": "Item 10",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "1 Million B.C.",
"heading": "Item 11",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
},
{
"date": "500,000 B.C.",
"heading": "Item 12",
"content": "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
}
]