TimelineJS 免费开源的时间轴插件
TimelineJS 是一个开源库,可以帮助你创建精美、可交互的时间轴。它可以使用 Google 试算表或基于 JSON 的 REST 后端作为数据来源。它可以处理不同种类的内容,从多个来源获取媒体文件,包括:
- Google Plus
- Flickr
- Youtube , Vimeo , DailyMotion
- Google Maps
时间线上可插入图片、视频(Youtube, Vimeo)、soundcloud、推特与维基百科辞条、谷歌地图等,由著名的 [Knight News Innovation Lab] 开发,因此很受新闻机构的欢迎。
开发背景
网络上有很多时间线工具,但他们几乎所有的眼睛都很难使用。创建在同一时间美丽和直观的用户的时间线。
TimelineJS 是一个杰出的时间线插件,能够支持图片、视频(Youtube, Vimeo)、soundcloud、推特与维基百科词条、谷歌地图等数据类型显示在时间轴上,未来将支持更多的媒体类型。
TimelineJS 让创建时间轴变得非常简单,添加一个谷歌 spreadsheet 或者 JSON 数据即可。
使用方法
简单使用
将嵌入的代码放置在你想要的时间线显示在 <body> 你的网站。见配置选项,可以在配置中设置什么样的完整列表。
<div id="timeline-embed"></div><script type="text/javascript">
var timeline_config = {
width: '100%',
height: '600',
source: 'path_to_json/or_link_to_googlespreadsheet',
embed_id: 'timeline-embed', //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
start_at_end: false, //OPTIONAL START AT LATEST DATE
start_at_slide: '4', //OPTIONAL START AT SPECIFIC SLIDE
start_zoom_adjust: '3', //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
hash_bookmark: true, //OPTIONAL LOCATION BAR HASHES
font: 'Bevan-PotanoSans', //OPTIONAL FONT
debug: true, //OPTIONAL DEBUG TO CONSOLE
lang: 'fr', //OPTIONAL LANGUAGE
maptype: 'watercolor', //OPTIONAL MAP STYLE
css: 'path_to_css/timeline.css', //OPTIONAL PATH TO CSS
js: 'path_to_js/timeline-min.js' //OPTIONAL PATH TO JS
}
</script>
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
高级用法
你也可以初始化一个新的时间线后,在 storyjs-embed.js
引入后调用 createStoryJS
方法。
createStoryJS({ type: 'timeline',
width: '800',
height: '600',
source: 'path_to_json/or_link_to_googlespreadsheet',
embed_id: 'my-timeline' // ID of the DIV you want to load the timeline into
});
这儿是一个完整的例子
<head> <!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- BEGIN TimelineJS -->
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
<script>
$(document).ready(function() {
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: 'path_to_json/or_link_to_googlespreadsheet',
embed_id: 'my-timeline'
});
});
</script>
<!-- END TimelineJS -->
</head>
<body>
<div id="my-timeline"></div>
</body>
加载文件
如果你喜欢,你可以从 KnightLab 的 CDN 加载 TimelineJS 所需的文件,上面的例子演示了如何使用 story-embed.js
,这是最简单的方法来建立一个你自己的时间线,如果因为某些原因你需要控制你的时间表更细粒度的,JavaScript 和 CSS 文件加载。我们建议您从我们的 CDN 负载。
<!-- always load the CSS --><link rel="stylesheet" type="text/css" target="_blank" class="external-link" href="https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css">
<!-- and then one of either -->
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/timeline.js"></script>
<!-- or -->
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js"></script>
<!-- but no need for both -->
如果你需要在你的服务器上的文件复制服务的全部内容,使用 /build/
目录我们的 GitHub 库。如果你使用 story-embed.js
本地副本应自动加载其他时间从你的服务器资源。
相关链接
- Github地址:https://github.com/NUKnightLab/TimelineJS
- TimelineJS时间轴插件配置参数
- 在线示例:http://timeline.knightlab.com/
以上是 TimelineJS 免费开源的时间轴插件 的全部内容, 来源链接: utcz.com/p/232161.html