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.5'Install the gem:
bundle installAdd the Javascript to application.js:
//=require timelineJS/embedAdd 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 belowafAfrikaansarArabic (beta)bgBulgariancaCatalanczCzechdaDanishdeGerman / DeutschelGreekenEnglishen-24hrEnglish using 24hr timeesSpanisheuBasque/ EuskarafiFinnishfoFaroesefrFrenchglGalicianhuHungarianhyArmenianidIndonesianisIcelandicitItalianiwHebrew (beta)jaJapanesekaGeorgiankoKoreanlvLatviannlDutchnoNorwegianplPolishpt-brBrazilian PortugueseptPortugueseruRussianskSlovakslSloveniansr-cySerbian (Cyrillic)srSerbian (Latin)svSwedishtaTamiltlTagalogtrTurkishzh-cnChinesezh-twTaiwanese
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-PTSansMerriweather-NewsCyclePoiretOne-MolengoPTSerif-PTSansDroidSerif-DroidSansLekton-MolengoNixieOne-LedgerAbrilFatface-AveragePlayfairDisplay-MuliRancho-GudeaBevan-PotanoSansBreeSerif-OpenSansSansitaOne-KameronPacifico-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'
});
});