Zach Wise
13 years ago
8 changed files with 46 additions and 388 deletions
@ -0,0 +1,36 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<title>jQuery Load Example Timeline</title> |
||||||
|
<meta name="description" content="TimelineJS example"> |
||||||
|
|
||||||
|
<!-- jQuery --> |
||||||
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
||||||
|
|
||||||
|
<!-- BEGIN TimelineJS --> |
||||||
|
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script> |
||||||
|
<script> |
||||||
|
$(document).ready(function() { |
||||||
|
|
||||||
|
createStoryJS({ |
||||||
|
type: 'timeline', |
||||||
|
width: '800', |
||||||
|
height: '600', |
||||||
|
source: 'example_json.json', |
||||||
|
embed_id: 'my-timeline', |
||||||
|
debug: true |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
|
</script> |
||||||
|
<!-- END TimelineJS --> |
||||||
|
|
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
|
||||||
|
<div id="my-timeline"></div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,47 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<title>Kitchen Sink Timeline</title> |
|
||||||
<meta name="description" content="TimelineJS example"> |
|
||||||
|
|
||||||
<style> |
|
||||||
html, body { |
|
||||||
height:100%; |
|
||||||
padding: 0px; |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
#timeline-embed{ |
|
||||||
margin:0px !important; |
|
||||||
border:0px solid #CCC !important; |
|
||||||
padding:0px !important; |
|
||||||
-webkit-border-radius:0px !important; |
|
||||||
-moz-border-radius:0px !important; |
|
||||||
border-radius:0px !important; |
|
||||||
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
||||||
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
||||||
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
|
|
||||||
</head> |
|
||||||
|
|
||||||
<body> |
|
||||||
<!-- BEGIN Timeline Embed --> |
|
||||||
<div id="timeline-embed"></div> |
|
||||||
<script type="text/javascript"> |
|
||||||
var timeline_config = { |
|
||||||
width: "100%", |
|
||||||
height: "100%", |
|
||||||
source: 'example_kitchensink.json', |
|
||||||
//start_at_end: true, //OPTIONAL |
|
||||||
//hash_bookmark: true, //OPTIONAL |
|
||||||
css: '../compiled/css/timeline.css', //OPTIONAL |
|
||||||
js: '../compiled/js/timeline-min.js' //OPTIONAL |
|
||||||
} |
|
||||||
</script> |
|
||||||
<script type="text/javascript" src="../compiled/js/timeline-embed.js"></script> |
|
||||||
<!-- END Timeline Embed --> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,266 +0,0 @@ |
|||||||
{ |
|
||||||
"timeline": |
|
||||||
{ |
|
||||||
"headline":"The Kitchen Sink, Évier de la Cuisine ", |
|
||||||
"type":"default", |
|
||||||
"startDate":"1888", |
|
||||||
"text":"An example of the different kinds of stuff you can do.", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg", |
|
||||||
"credit":"", |
|
||||||
"caption":"" |
|
||||||
}, |
|
||||||
"era": [ |
|
||||||
{ |
|
||||||
"startDate":"1895,1,1", |
|
||||||
"endDate":"1910,1,1", |
|
||||||
"headline":"Georges Méliès", |
|
||||||
"text":"Example of an era" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1980,1,1", |
|
||||||
"endDate":"1995,1,1", |
|
||||||
"headline":"Another Era", |
|
||||||
"text":"Example of an era" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1990,1,1", |
|
||||||
"endDate":"2013,1,1", |
|
||||||
"headline":"Yet Another Era", |
|
||||||
"text":"Example of an era" |
|
||||||
} |
|
||||||
], |
|
||||||
"chart": [ |
|
||||||
{ |
|
||||||
"startDate":"1895,1,1", |
|
||||||
"endDate":"1905,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"28" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1906,1,1", |
|
||||||
"endDate":"1915,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"35" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1916,1,1", |
|
||||||
"endDate":"1925,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"55" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1926,1,1", |
|
||||||
"endDate":"1935,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"67" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1936,1,1", |
|
||||||
"endDate":"1945,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"78" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1946,1,1", |
|
||||||
"endDate":"1955,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"79" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1956,1,1", |
|
||||||
"endDate":"1965,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"84" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1966,1,1", |
|
||||||
"endDate":"1975,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"66" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1976,1,1", |
|
||||||
"endDate":"1985,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"87" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1986,1,1", |
|
||||||
"endDate":"1995,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"90" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1996,1,1", |
|
||||||
"endDate":"2005,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"45" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2006,1,1", |
|
||||||
"endDate":"2015,1,1", |
|
||||||
"headline":"Something", |
|
||||||
"value":"99" |
|
||||||
} |
|
||||||
], |
|
||||||
"date": [ |
|
||||||
{ |
|
||||||
"startDate":"2012,1,18", |
|
||||||
"headline":"YouTube", |
|
||||||
"text":"To add a YouTube video, just add a link to it.", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://youtu.be/5NlVttFRPpU?hd=1&t=3s", |
|
||||||
"credit":"", |
|
||||||
"caption":"From the creators of the game Flower comes Journey for the PlayStation 3." |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1980,1,18", |
|
||||||
"headline":"Google Map", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://maps.google.com/?ll=42.054932,-87.674654&spn=0.014785,0.023754&hnear=1630+Lake+Ave,+Wilmette,+Illinois+60091&t=v&z=16", |
|
||||||
"credit":"", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2000,1,18", |
|
||||||
"headline":"Google Map", |
|
||||||
"text":"Just add the link to the map!", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://maps.google.com/maps?q=Northwestern+University,+Sheridan+Road,+Evanston,+IL&hl=en&ll=42.056972,-87.676907&spn=0.02957,0.047507&sll=42.054932,-87.674654&sspn=0.014785,0.023754&oq=northwestern+&t=v&hq=Northwestern+University,+Sheridan+Road,+Evanston,+IL&z=15", |
|
||||||
"credit":"", |
|
||||||
"thumbnail":"http://farm7.staticflickr.com/6204/6114531655_71030ae15f_s.jpg", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
"startDate":"1899", |
|
||||||
"headline":"Le portrait mystérieux ", |
|
||||||
"text":"To add a YouTube video, just add a link to it.", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://youtu.be/lIvftGgps24", |
|
||||||
"credit":"Georges Méliès", |
|
||||||
"caption":"Le portrait mystérieux" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1902", |
|
||||||
"headline":"L'oeuf du sorcier", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://youtu.be/JdBqHgwN7Pg", |
|
||||||
"credit":"Georges Méliès", |
|
||||||
"caption":"L'oeuf du sorcier" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1905", |
|
||||||
"headline":"Le juif errant", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://youtu.be/SvmM_YSnWX8", |
|
||||||
"credit":"Georges Méliès", |
|
||||||
"caption":"Le juif errant" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1903", |
|
||||||
"headline":"Le tonnerre de Jupiter", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://youtu.be/nIylL8ufx3Y", |
|
||||||
"credit":"Georges Méliès", |
|
||||||
"caption":"Le tonnerre de Jupiter" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1980,2,7", |
|
||||||
"headline":"Flickr", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://www.flickr.com/photos/zachwise/6856858425/in/photostream", |
|
||||||
"credit":"Zach Wise", |
|
||||||
"caption":"Feels like Siberia again" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"1990,2,7", |
|
||||||
"headline":"Flickr", |
|
||||||
"text":"", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://www.flickr.com/photos/zachwise/6687123779/in/photostream", |
|
||||||
"credit":"Zach Wise", |
|
||||||
"caption":"Enjoying the snow while sheltered at the train station" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2012,2,7", |
|
||||||
"headline":"A Tweet", |
|
||||||
"text":"To add a tweet, just add the link.", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"https://twitter.com/#!/neonmarg/status/167006310850760706", |
|
||||||
"credit":"", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
"startDate":"2012,1,18", |
|
||||||
"headline":"SoundCloud ", |
|
||||||
"text":"Just add a link to the track", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://soundcloud.com/radiohead/radiohead_separator-anstam-rmx", |
|
||||||
"credit":"Radiohead Separator - Anstam RMX", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2011,12,23", |
|
||||||
"headline":"Vimeo", |
|
||||||
"text":"<p>Whitestone Motion Pictures proudly presents ‘Jack and the Dustbowl’, a short film about overcoming adversity and making the impossible, possible.</p><p>Jack Spriggs, a poor dust bowl farmer from Alabama, is determined to keep his family’s land. Set during the Great Depression, record heat waves and over-farming have turned the once fertile soil into worthless dust. Refusing to become a victim of his circumstances, Jack embraces his surroundings and digs in. Jack’s tenacious spirit and ingenuity will either keep his family together or he'll lose everything trying.</p>", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"https://vimeo.com/34724990", |
|
||||||
"credit":"Whitestone Motion Pictures", |
|
||||||
"caption":"Whitestone Motion Pictures proudly presents ‘Jack and the Dustbowl’, a short film about overcoming adversity and making the impossible, possible." |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2011,2,10", |
|
||||||
"headline":"Some Tweet Response also", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://twitter.com/alykat/status/164184609519697920", |
|
||||||
"credit":"", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"startDate":"2011,12,10", |
|
||||||
"headline":"Some Tweet Response", |
|
||||||
"asset": |
|
||||||
{ |
|
||||||
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", |
|
||||||
"credit":"", |
|
||||||
"caption":"" |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue