javascript: TimelineJS3 Examples
demo Timeline examples: Autoloading Timeline Slideshow (dusystem.com)
Timeline examples: Autoloading Timeline Slideshow <script src="libs/timeline3/latest/js/timeline.js"></script><script type="text/javascript"> var additionalOptions = { script_path: 'http://www.dusystem.com/TimelineJS3/libs/timeline3/latest/js', language: 'zh-cn', //简体中文 涂聚文 Geovin Du /timeline timeline3.json font: 'amatic-andika' } const timeline = new TL.Timeline('timeline-embed', 'https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit?usp=drive_web&ouid=113808851972646275751',additionalOptions); const loadNextSlide = function() { try { timeline.goToNext(); } catch(err) { if (err instanceof TypeError) { console.log(err.message); if (err.message === "Cannot read property 'unique_id' of undefined") { timeline.goToStart(); } } } }; setInterval(loadNextSlide, 5000); </script>TimelineJS3 Examples
Slideshow
demo: Timeline examples: Autoloading Timeline Slideshow (dusystem.com)
https://github.com/thecdil/timelinejs-template
https://cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js
https://cdn.knightlab.com/libs/soundcite/latest/css/player.css
https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js
https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js.map
https://cdn.knightlab.com/libs/timeline3/latest/js/timeline-min.js
https://cdn.knightlab.com/libs/timeline3/latest/js/locale/zh-cn.json
https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.amatic-andika.css
https://cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js
spreadsheets
Year, Month, Day, Time, End Year, End Month, End Day, End Time ,Display Date, Headline,Text, Media, Media Credit, Media Caption, Media Thumbnail, Type, Group, Background
https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml
https://thecdil.github.io/timelinejs-template/example.html
https://github.com/thecdil/timelinejs-template
af
ar
be
bg
ca
cz
da
de
el
en
en-24hr
en-week
eo
es
et
eu
fa
fi
fo
fr
fy
ga
gl
he
hi
hr
hu
hy
id
is
it
iw
ja
ka
ko
lb
lt
lv
ms
my
ne
nl
no
pl
pt
pt-br
rm
ro
ru
si
sk
sl
sr
sr-cy
sv
ta
te
th
tl
tr
uk
ur
vi
zh-cn
zh-tw
http://timeline.knightlab.com/docs/instantiate-a-timeline.html
https://cdn.knightlab.com/libs/timeline3/latest/timeline3.zip
https://docs.sheetdb.io/#introduction
https://ds.bc.edu/creating-a-timeline-with-timelinejs-and-json/
https://library.bc.edu/lafargeglass/
https://library.bc.edu/lafargeglass/biography/
https://library.bc.edu/lafargeglass/exhibits/show/visual/sgtimeline
https://library.bc.edu/lafargeglass/exhibits/show/visual/biotimeline
https://blog.sheetdb.io/display-live-data-from-google-spreadsheet-in-an-html-table-61fd3a97d79b
https://www.codeproject.com/articles/691749/free-net-spreadsheet-control
https://docs.sheetdb.io/#introduction
https://github.com/sheetdb/sheetdb-js
Timeline examples: Autoloading Timeline Slideshow <script src="js/timeline.js" charset="utf-8" type="text/javascript"></script> <script src="js/jquery-3.5.1.min.js" charset="utf-8"></script><script type="text/javascript"> //本地可以读取 $(document).ready(function(){ var duOptions = { script_path: 'http://www.dusystem.com/timeline30/js', language: 'zh-cn', //简体中文 涂聚文 Geovin Du /timeline timeline3.json font: 'amatic-andika' } if ( $('#timeline1-embed').length > 0 ) { console.log("found timeline1-embed"); timeline = new TL.Timeline('timeline1-embed', 'lafargechronology.JSON',duOptions); } else if ( $('#timeline2-embed').length > 0 ) { console.log("found timeline2-embed"); timeline = new TL.Timeline('timeline2-embed', 'sglasschronology.JSON',duOptions); } }); </script>TimelineJS3 Examples
Slideshow