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.
237 lines
12 KiB
237 lines
12 KiB
<!-- Make a Timeline --> |
|
<section id="make" class="container"> |
|
|
|
<div class="row"> |
|
<div class="span12"> |
|
<h2>Make a Timeline</h2> |
|
<p>TimelineJS works on any site or blog. Make your own in four easy steps. (<a href="http://www.youtube.com/watch?v=vAWbm4gF9lU">video tutorial</a>)</p> |
|
</div> |
|
</div> |
|
|
|
<!-- Step 1 --> |
|
<div class="step row"> |
|
<h2 class="span1">1</h2> |
|
<div class="span11"> |
|
<h4>Create your spreadsheet</h4> |
|
<p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" >template</a>. Drop dates, text and links to media into the appropriate columns. <b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p> |
|
<p><a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" class="btn">Google Spreadsheet Template</a></p> |
|
</div> |
|
</div> |
|
|
|
<!-- Step 2 --> |
|
<div class="step row"> |
|
<h2 class="span1">2</h2> |
|
<div class="span11"> |
|
<h4>Publish to the web</h4> |
|
<div class="row"> |
|
<div class="span5"> |
|
<p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_small.png" alt="Publish to Web"></p> |
|
</div> |
|
<div class="span6"> |
|
<p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_url_small.png" alt="Publish to Web"></p> |
|
<p>Under the File menu, select <em>“Publish to the Web.”</em></p> |
|
<p>In the next window, check <em>“Automatically republish when changes are made.”</em> Uncheck all other boxes. Click <em>“start publishing.”</em> This will give you the URL to embed in your HTML file.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Step 3 --> |
|
<form class="step row form form-horizontal"> |
|
<h2 class="span1">3</h2> |
|
<div class="span11"> |
|
<h4>Copy/paste spreadsheet URL into the generator box below</h4> |
|
<div class="control-group"> |
|
<label class="control-label">Google Spreadsheet URL</label> |
|
<div class="controls"> |
|
<input type="text" id="embed-source-url" class="span4"> |
|
<p class="help-inline">Make sure you've published it.</p> |
|
</div> |
|
</div> |
|
<!-- Size--> |
|
<div class="control-group"> |
|
<label class="control-label">Size</label> |
|
<div class="controls"> |
|
<div class="input-prepend"><span class="add-on">Width</span> |
|
<input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini"> |
|
</div> |
|
<div class="input-prepend"><span class="add-on">Height</span> |
|
<input type="text" value="650" placeholder="650" id="embed-height" class="input-mini"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Extra Options --> |
|
<p><a class="btn show-options" href="#">More Options <span class="caret"></span></a></p> |
|
<div class="more-options"> |
|
<h4>Customize (Optional)</h4> |
|
<!-- Language--> |
|
<div class="control-group"> |
|
<label class="control-label">Language</label> |
|
<div class="controls"> |
|
<select id="embed-language"> |
|
<option value="en">English</option> |
|
<option value="en-24hr">English (24-hour time)</option> |
|
<option value="af">Afrikaans</option> |
|
<option value="ar">Arabic</option> |
|
<option value="hy">Armenian</option> |
|
<option value="eu">Basque</option> |
|
<option value="bg">Bulgarian</option> |
|
<option value="ca">Catalan</option> |
|
<option value="zh-ch">Chinese</option> |
|
<option value="cz">Czech</option> |
|
<option value="da">Danish</option> |
|
<option value="nl">Dutch</option> |
|
<option value="eo">Esperanto</option> |
|
<option value="et">Estonian</option> |
|
<option value="fo">Faroese</option> |
|
<option value="fi">Finnish</option> |
|
<option value="fr">French</option> |
|
<option value="gl">Galician</option> |
|
<option value="ka">Georgian</option> |
|
<option value="de">German / Deutsch</option> |
|
<option value="el">Greek</option> |
|
<option value="he">Hebrew</option> |
|
<option value="hu">Hungarian</option> |
|
<option value="is">Icelandic</option> |
|
<option value="id">Indonesian</option> |
|
<option value="it">Italian</option> |
|
<option value="ja">Japanese</option> |
|
<option value="ko">Korean</option> |
|
<option value="lv">Latvian</option> |
|
<option value="lb">Luxembourgish</option> |
|
<option value="ms">Malay</option> |
|
<option value="no">Norwegian</option> |
|
<option value="pl">Polish</option> |
|
<option value="pt">Portuguese</option> |
|
<option value="pt-br">Portuguese (Brazilian)</option> |
|
<option value="rm">Romansh</option> |
|
<option value="ru">Russian</option> |
|
<option value="sr-cy">Serbian - Cyrillic</option> |
|
<option value="sr">Serbian - Latin</option> |
|
<option value="si">Sinhalese</option> |
|
<option value="sk">Slovak</option> |
|
<option value="sl">Slovenian</option> |
|
<option value="es">Spanish</option> |
|
<option value="sv">Swedish</option> |
|
<option value="ta">Tamil</option> |
|
<option value="tl">Tagalog</option> |
|
<option value="te">Telugu</option> |
|
<option value="tr">Turkish</option> |
|
<option value="zh-tw">Taiwanese</option> |
|
</select> |
|
</div> |
|
</div> |
|
<!-- Map Type--> |
|
<div class="control-group"> |
|
<label class="control-label">Map Type</label> |
|
<div class="controls"> |
|
<select id="embed-maptype"> |
|
<!-- |
|
<option value="toner">Stamen Maps: Toner</option> |
|
<option value="toner-lines">Stamen Maps: Toner Lines</option> |
|
<option value="toner-labels">Stamen Maps: Toner Labels</option> |
|
<option value="watercolor">Stamen Maps: Watercolor</option> |
|
<option value="sterrain">Stamen Maps: Terrain</option> |
|
--> |
|
<option value="TERRAIN">Google Maps: Terrain</option> |
|
<option value="ROADMAP">Google Maps: Roadmap</option> |
|
<option value="HYBRID">Google Maps: Hybrid</option> |
|
<option value="SATELLITE">Google Maps: Satellite</option> |
|
</select> |
|
<input type="text" placeholder="Google Maps API Key" id="embed-googlemapkey"> |
|
<p class="help-block">If you are using a Google map type, please enter your <a href="https://developers.google.com/places/documentation/#Authentication" target="_blank">API Key</a>.<br> |
|
Stamen map types are temporarily disabled while we work out a bug. |
|
</p> |
|
</div> |
|
</div> |
|
<!-- Fonts--> |
|
<div class="control-group"> |
|
<label class="control-label">Fonts</label> |
|
<div class="controls"> |
|
<select id="embed-font"> |
|
<option value="Bevan-PotanoSans">Bevan & Potano Sans</option> |
|
<option value="Georgia-Helvetica">Georgia & Helvetica Neue</option> |
|
<option value="Merriweather-NewsCycle">Merriweather & News Cycle</option> |
|
<option value="NewsCycle-Merriweather">News Cycle & Merriweather</option> |
|
<option value="PoiretOne-Molengo">Poiret One & Molengo</option> |
|
<option value="Arvo-PTSans">Arvo & PT Sans</option> |
|
<option value="PTSerif-PTSans">PT Serif & PT Sans</option> |
|
<option value="DroidSerif-DroidSans">Droid Serif & Droid Sans</option> |
|
<option value="Lekton-Molengo">Lekton & Molengo</option> |
|
<option value="NixieOne-Ledger">Nixie One & Ledger</option> |
|
<option value="AbrilFatface-Average">Abril Fatface & Average</option> |
|
<option value="PlayfairDisplay-Muli">Playfair Display & Muli</option> |
|
<option value="Rancho-Gudea">Rancho & Gudea</option> |
|
<option value="BreeSerif-OpenSans">Bree Serif & Open Sans</option> |
|
<option value="SansitaOne-Kameron">Sansita One & Kameron</option> |
|
<option value="Pacifico-Arimo">Pacifico & Arimo</option> |
|
<option value="PT">PT Sans & PT Narrow & PT Serif</option> |
|
</select> |
|
</div> |
|
</div> |
|
<!-- Wordpress Plugin--> |
|
<div class="control-group"> |
|
<label class="control-label">Misc</label> |
|
<div class="controls"> |
|
<label class="checkbox"> |
|
<input id="embed-wordpressplugin" type="checkbox" value="option1">Wordpress Plugin<span class="help-inline">Is the embed for the <a href="https://github.com/VeriteCo/TimelineJS-Wordpress-Plugin" target="_blank">Wordpress Plugin</a>?</span> |
|
</label> |
|
<!-- Start at End?--> |
|
<label class="checkbox"> |
|
<input id="embed-startatend" type="checkbox" value="option1">Start at the End?<span class="help-inline">The most recent event will be shown first.</span> |
|
</label> |
|
<!-- Hash Bookmarks--> |
|
<label class="checkbox"> |
|
<input id="embed-hashbookmark" type="checkbox" value="option1">Hash Bookmarks<span class="help-inline">On each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline</span> |
|
</label> |
|
<!-- Debug--> |
|
<label class="checkbox"> |
|
<input id="embed-debug" type="checkbox" value="option1">Debug<span class="help-inline">In debug mode, you will see console logs.</span> |
|
</label> |
|
</div> |
|
</div> |
|
<!-- Start Zoom Adjust--> |
|
<div class="control-group"> |
|
<label class="control-label">Adjust the default calculated zoom level</label> |
|
<div class="controls"> |
|
<input id="embed-startzoomadjust" type="text" value="0" placeholder="0" class="input-mini"> |
|
<p class="help-block">This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.</p> |
|
</div> |
|
</div> |
|
<!-- Start at Slide--> |
|
<div class="control-group"> |
|
<label class="control-label">Start at specific slide number?</label> |
|
<div class="controls"> |
|
<div class="input-prepend"><span class="add-on">Slide</span> |
|
<input id="embed-startatslide" type="text" value="0" placeholder="0" class="input-mini"> |
|
</div> |
|
<p class="help-block">You can tell TimelineJS to start at a specific slide number</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</form> |
|
|
|
<!-- Step 4 --> |
|
<div class="step row last"> |
|
<h2 class="span1">4</h2> |
|
<div class="span11"> |
|
<h4>Embed the code into your website</h4> |
|
<p>Grab the embed code and paste it on your site where you want your TimelineJS to appear (just like a YouTube video).</p> |
|
<textarea readonly="readonly" style="width: 100%; height: 160px; min-height: 110px; max-height: 300px; resize: none; font-family: Menlo,Monaco,'Courier New',monospace; font-size: 12px;" id="embed_code"><iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&width=600&height=600' width='600' height='600' frameborder='0'></iframe></textarea><br><br> |
|
<p><a href="#preview-embed" data-scroll="true" id="iframe-preview-button" class="btn btn-primary">Preview</a> |
|
<a href="#preview-embed" data-scroll="true" id="preview-embed-link" target="_blank" class="btn">Link to Preview</a></p> |
|
</div> |
|
</div> |
|
|
|
<!-- Preview --> |
|
<div id="preview" class="row"> |
|
<div id="preview-embed"> |
|
<h2>Preview</h2> |
|
<div id="preview-embed-iframe" class="span12"></div> |
|
</div> |
|
</div> |
|
|
|
</section>
|
|
|