Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
7.7 KiB
192 lines
7.7 KiB
12 years ago
|
|
||
|
{
|
||
|
"timeline":
|
||
|
{
|
||
|
"headline":"Welcome to TimelineJS",
|
||
|
"type":"default",
|
||
|
"startDate":"1888",
|
||
12 years ago
|
"text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>You're looking at an example of one right now.</p><p>Click on the arrow to the right to learn more.</p>",
|
||
12 years ago
|
"asset": {
|
||
|
"media":"http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg",
|
||
|
"credit":"",
|
||
|
"caption":""
|
||
|
},
|
||
|
"date": [
|
||
12 years ago
|
{
|
||
|
"startDate":"1851",
|
||
|
"headline":"It's Easy to Make Your Own Timeline",
|
||
|
"text":"The TimelineJS Embed Generator makes it easy to add a timeline to your own site. Just copy our Google Spreadsheet template, add your events as rows in the spreadsheet, and use our <a href='#make'>generator tool</a> to generate the HTML you need to add to your site.",
|
||
|
"asset":
|
||
12 years ago
|
{
|
||
12 years ago
|
"media":"/static/welcome/step3.png",
|
||
12 years ago
|
"credit":"",
|
||
12 years ago
|
"caption":"Screenshot from TimelineJS Embed Generator tool (see below)"
|
||
12 years ago
|
}
|
||
|
},
|
||
12 years ago
|
{
|
||
|
"startDate":"1871",
|
||
|
"headline":"Illustrate your Timeline with photos, videos, tweets and more.",
|
||
|
"text":"Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"",
|
||
12 years ago
|
"credit":"",
|
||
12 years ago
|
"caption":"Screenshot from TimelineJS Embed Generator tool (see below)"
|
||
12 years ago
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"1899",
|
||
|
"headline":"YouTube video",
|
||
|
"text":"To add a YouTube video, just add a link to it in the media field. No embedding necessary. http://youtu.be/lIvftGgps24",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://youtu.be/lIvftGgps24",
|
||
|
"credit":"Georges Méliès",
|
||
|
"caption":"Le portrait mystérieux"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"1902",
|
||
12 years ago
|
"headline":"YouTube with no text",
|
||
|
"text":"",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"http://youtu.be/7JDaOOw0MEE",
|
||
|
"credit":"Georges Méliès",
|
||
|
"caption":"A Trip to the Moon / Le Voyage dans la lune"
|
||
12 years ago
|
}
|
||
12 years ago
|
},
|
||
|
{
|
||
12 years ago
|
"startDate":"1902",
|
||
|
"headline":"Wikipedia",
|
||
|
"text":"Add a link to a <a href='http://en.wikipedia.org/wiki/A_Trip_to_the_Moon' target='_blank'>Wikipedia entry</a> in the media field to show an excerpt alongside your text.",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon",
|
||
|
"credit":"",
|
||
|
"caption":""
|
||
12 years ago
|
}
|
||
12 years ago
|
},
|
||
|
{
|
||
|
"startDate":"1950,2,7",
|
||
|
"headline":"Blockquote",
|
||
12 years ago
|
"text":"This is an example of a blockquote. <br/><blockquote>“Just use html blockquotes in the media field.”</blockquote>",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
|
"media":"<blockquote>“You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go.”</blockquote>",
|
||
|
"credit":"Dr. Seuss",
|
||
|
"caption":""
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"1960,2,7",
|
||
|
"headline":"Website",
|
||
|
"text":"This is an example of a website. Just paste a link to the site in the media field.",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://www.w3schools.com/",
|
||
|
"credit":"w3schools",
|
||
|
"caption":"http://w3schools.com"
|
||
|
}
|
||
12 years ago
|
},
|
||
|
{
|
||
|
"startDate":"1979,1,18",
|
||
|
"headline":"Google Map",
|
||
|
"text":"Google Maps are easy too. Just add the link to the map in the media field.",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://maps.google.com/maps?hl=en&sll=42.05083,-87.674194&sspn=0.020170947570668576,0.036220713642592585&z=15",
|
||
|
"credit":"",
|
||
|
"caption":""
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"1980,1,18",
|
||
|
"headline":"Google Map with no text",
|
||
|
"text":"",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11",
|
||
|
"credit":"",
|
||
|
"caption":""
|
||
|
}
|
||
12 years ago
|
},
|
||
|
{
|
||
12 years ago
|
"startDate":"1985,2,7",
|
||
12 years ago
|
"headline":"Flickr",
|
||
12 years ago
|
"text":"To add a Flickr photo, just paste a link to the photo page in the media field. Example: http://www.flickr.com/photos/zachwise/7074630607/",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://www.flickr.com/photos/zachwise/7074630607/in/photostream/",
|
||
|
"credit":"Zach Wise",
|
||
|
"caption":""
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"1990,2,7",
|
||
|
"headline":"Flickr with no text",
|
||
|
"text":"",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
|
"media":"http://www.flickr.com/photos/zachwise/7050589957/in/photostream/",
|
||
|
"credit":"Zach Wise",
|
||
|
"caption":"March to work."
|
||
|
}
|
||
|
},
|
||
|
{
|
||
12 years ago
|
"startDate":"2001,2,10",
|
||
|
"headline":"A Tweet",
|
||
|
"text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"http://twitter.com/alykat/status/164184609519697920",
|
||
12 years ago
|
"credit":"",
|
||
12 years ago
|
"caption":""
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"2002,12,10",
|
||
|
"headline":"Yet Another Tweet",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
|
||
|
"credit":"",
|
||
|
"caption":""
|
||
12 years ago
|
}
|
||
|
},
|
||
|
{
|
||
|
"startDate":"2011,8,23",
|
||
|
"headline":"Vimeo",
|
||
|
"text":"<p>Just add a link to the video in the media field. Example: https://vimeo.com/33211636</p>",
|
||
|
"asset":
|
||
|
{
|
||
|
"media":"https://vimeo.com/33211636",
|
||
|
"credit":"Denis Chapon",
|
||
|
"caption":""
|
||
|
}
|
||
|
},
|
||
|
{
|
||
12 years ago
|
"startDate":"2012,1,18",
|
||
|
"headline":"SoundCloud ",
|
||
|
"text":"Just add a link to the track in the media field.",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"http://soundcloud.com/beastieboys/make-some-noise",
|
||
12 years ago
|
"credit":"",
|
||
12 years ago
|
"caption":"R.I.P. MCA."
|
||
12 years ago
|
}
|
||
|
},
|
||
|
{
|
||
12 years ago
|
"startDate":"2013,10,01",
|
||
|
"headline":"Get started!",
|
||
|
"text":"Use the <a href='#make'>generator form</a> to make your first timeline now.",
|
||
12 years ago
|
"asset":
|
||
|
{
|
||
12 years ago
|
"media":"",
|
||
12 years ago
|
"credit":"",
|
||
|
"caption":""
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|