timelineJS-rails

This gem packages the TimelineJS for easy use with the Rails asset pipleine.

Add to the assets group in your Gemfile:

gem 'timelineJS-rails', '~> 1.1.1'

Install the gem:

bundle install

Add the Javascript to application.js:

//=require timelineJS/embed

Add the CSS to application.css

/*
 *= require timelineJS/timeline
 */

The Localization language default is en English, if you want to change it, just add the Javascript to application.js:

//=require timelineJS/locale/xxx # you should change the xxx with one of the available languages below

• af Afrikaans
• ar Arabic (beta)
• bg Bulgarian
• ca Catalan
• cz Czech
• da Danish
• de German / Deutsch
• el Greek
• en English
• en-24hr English using 24hr time
• es Spanish
• eu Basque/ Euskara
• fi Finnish
• fo Faroese
• fr French
• gl Galician
• hu Hungarian
• hy Armenian
• id Indonesian
• is Icelandic
• it Italian
• iw Hebrew (beta)
• ja Japanese
• ka Georgian
• ko Korean
• lv Latvian
• nl Dutch
• no Norwegian
• pl Polish
• pt-br Brazilian Portuguese
• pt Portuguese
• ru Russian
• sk Slovak
• sl Slovenian
• sr-cy Serbian (Cyrillic)
• sr Serbian (Latin)
• sv Swedish
• ta Tamil
• tl Tagalog
• tr Turkish
• zh-cn Chinese
• zh-tw Taiwanese

If you want to set the font theme, just add the CSS to application.css:

/*
 *= require timelineJS/themes/font/xxx #you should change the xxx with one of the available font themes below
 */

• Arvo-PTSans
• Merriweather-NewsCycle
• PoiretOne-Molengo
• PTSerif-PTSans
• DroidSerif-DroidSans
• Lekton-Molengo
• NixieOne-Ledger
• AbrilFatface-Average
• PlayfairDisplay-Muli
• Rancho-Gudea
• Bevan-PotanoSans
• BreeSerif-OpenSans
• SansitaOne-Kameron
• Pacifico-Arimo

  $(document).ready(function() {
    createStoryJS({
      type: 'timeline',
      width: '400',
      height: '500',
      source: '/events.json', //get the events.json format from https://github.com/VeriteCo/TimelineJS#file-formats
      embed_id: 'time_line'
    });
  });

<%= timeline_config(
      embed_id: "timeline_id",
      source: '/events.json',
      height: '600',
      lang: 'zh-cn',
      font: 'Bevan-PotanoSans'
  )
%>

• TimelineJS

www.opensource.org/licenses/MIT