timelineJS-rails

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

General Installation

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
 */

Language

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

Font Themes

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

Example

  $(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'
  )
%>

Thanks