Zach Wise
12 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