<!-- 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> <p>Under the File menu, select <em>“Publish to the Web.”</em></p> <p>In the next window, click the blue "publish" button. When asked, "Are you sureā¦?" click OK.</p> <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p> </div> <div class="span6"> <p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_button_small.png" alt="Publish to Web 2"></p><p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_url_small.png" alt="Publish to Web 3"></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="be">Belarusian</option> <option value="bg">Bulgarian</option> <option value="ca">Catalan</option> <option value="zh-cn">Chinese</option> <option value="hr">Croatian / Hrvatski</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="fa">Farsi</option> <option value="fi">Finnish</option> <option value="fr">French</option> <option value="fy">Frisian</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="hi">Hindi</option> <option value="hu">Hungarian</option> <option value="is">Icelandic</option> <option value="id">Indonesian</option> <option value="ga">Irish</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ko">Korean</option> <option value="lv">Latvian</option> <option value="lt">Lithuanian</option> <option value="lb">Luxembourgish</option> <option value="ms">Malay</option> <option value="ne">Nepali</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="ro">Romanian</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="tl">Tagalog</option> <option value="ta">Tamil</option> <option value="zh-tw">Taiwanese</option> <option value="te">Telugu</option> <option value="th">Thai</option> <option value="tr">Turkish</option> <option value="uk">Ukrainian</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="osm">OpenStreetMap</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> <a href="#" onclick="return false;" id="font-preview-trigger" data-toggle="popover" data-placement="bottom" data-html="true" data-content="<img src='{{ static_url }}/img/make/font-options.png' alt='Font Option Preview'>">click to preview font combinations</a> </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/NUKnightLab/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. Equivalent 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> </div> <!-- 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='//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>