{% include timelinejs.html json-source="" %}
Created
February 16, 2016 00:27
-
-
Save elipousson/1b02f519d546e8d0dd67 to your computer and use it in GitHub Desktop.
TimelineJS include for Jekyll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- CSS and Fonts --> | |
<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css"> | |
<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.opensans-gentiumbook.css"> | |
<!-- | |
The second link sets the font combination – currently OpenSans/Gentium Book. Here are all the values which you might use there: | |
font.abril-droidsans.css | |
font.amatic-andika.css | |
font.bevan-pontanosans.css | |
font.bitter-raleway.css | |
font.clicker-garamond.css | |
font.dancing-ledger.css | |
font.default.css | |
font.fjalla-average.css | |
font.georgia-helvetica.css | |
font.knightlab.css | |
font.lustria-lato.css | |
font.medula-lato.css | |
font.oldstandard.css | |
font.opensans-gentiumbook.css | |
font.playfair-faunaone.css | |
font.playfair.css | |
font.pt.css | |
font.roboto-megrim.css | |
font.rufina-sintony.css | |
font.ubuntu.css | |
font.unicaone-vollkorn.css | |
--> | |
<!-- Timeline.js from the KnightLab CDN --> | |
<script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script> | |
<div id='timeline-embed' style="width: 100%; height: 600px"></div> | |
<!-- The script --> | |
<script type="text/javascript"> | |
var options = { | |
is_embed: true, | |
is_full_embed: true, | |
initial_zoom: 2 | |
} | |
// The TL.Timeline constructor takes at least two arguments: | |
// the id of the Timeline container (no '#'), and | |
// the URL to your JSON data file or Google spreadsheet. | |
// the id must refer to an element "above" this code, | |
// and the element must have CSS styling to give it width and height | |
// optionally, a third argument with configuration options can be passed. | |
// See below for more about options. | |
timeline = new TL.Timeline('timeline-embed', | |
'{{ include.json-source }}'); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
One should, theoretically, be able to input a YAML file (easier to write and inspect) instead of JSON by importing the YAML library: