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>
  
  
    

TimelineJS3 Examples

Slideshow

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

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>
  
  
    

TimelineJS3 Examples

Slideshow

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