TimelineJS is an open-source JavaScript visualization library that enables you to build beautifully crafted interactive timelines that are easy and intuitive to use. Primarily it was developed to advance news media representation on the web, but it can be used in any field, especially since it is available in 40 languages.
Create Your Own Timeline
Anybody can make timeline with TimelineJS using nothing more than a Google spreadsheet. More advanced users can apply JSON to customize installations, while keeping TimelineJS's core look and functionality.
Basically, there is no need to have knowledge of JavaScript or install additional products to your website. Using the TimelineJS Embed Generator the process of adding timeline to the website is very simple. Just create Google Spreadsheet according to the template available on the http://timeline.knightlab.com/, add events, dates, text and links. Then use the generator tool to generate a piece of HTML code that can be added to any place on the website. To update the timeline later, all you’ll need to do is to update the Google Spreadsheet. Timeline will be changed automatically.
TimelineJS supports several media services, like video: YouTube, Vimeo, Vine, Dailymotion. No embedding needed, just paste a link to the video from those websites into the media field of the spreadsheet and it will be displayed in the timeline. The same goes for images on Flickr: just add a link to the photo page in the media field. You can also illustrate the timeline with blockquotes, wikipedia pages, examples of a website and even tweets. Also library has built-in support for Google Maps and SoundCloud. Simple link to particular map or track will automatically pull them in and help tell the story.
There is TimelineJS integration for Plone - collective.timelines. This product provides folders and collections with a beautiful timeline view. New timeline-view is available for Folders and new and old-style (ATTopic) Collections (ATTopic). collective.timelines handles default content items. If they have a remoteUrl (i.e. and ATLink), it will be used to generate the thumbnail for the page. Special handling for Youtube, Twitter, Wikipedia and Flickr links is built-in. In all other cases the page URL is used to generate the thumbnail. Additionally, the package brings a Dexterity behavior for adding timeline dates on content and a schema extender that can be applied to all Archetypes content (except ATEvent, for which the normal date fields are used). Although the default adapters for Archetypes and Dexterity content should handle most use cases, the timeline metadata for specific content types may be further customized.
If you want to add visually-rich timeline and highlight particular content on your website, visit TimelineJS website.
The default TimelineJS template works in the following way: