Simile Timeline Scripts

This library contains a script called timeline.js, which will allow you to quickly build and display a timeline by making certain changes in a configuration file called config.js, and loading data from a JSON file (which I'm calling times.json) and optionally some other files containing information about hotzones and highlighting. You can also change the timeline.js file if you wish, but this is not necessarily for basic implementation (and not advised unless you are certain you understand how the file works). You can view the source of this page (the one you're reading) if you'd like to use it as a starter template.

Getting Started

In addition to the HTML page on which you will display the timeline, you'll need to save a few other files as well:

The example provided here also makes use of two more JSON files that you may want to look through (but can be excluded if you modify the config.js file). These files provide information about band highlighting and 'hot zones' (sections that are magnified):

You will likely want to create your own CSS file tailored to your web site, however if you'd like to use mine while playing with this library, here is a link to it. The only significant specification is the timeline height and width, and you can modify those however you like:

Save those files into a folder on your local system, along with a copy of this page (index.html) using the source code of the page. When you open the page in your web browser, you should already see the timeline as it appears here. You can modify the page code (for example, remove these instructions, tweak CSS, etc) as well as alter your data or even use Ajax to call in dynamic data by modifying the config.js and config.json files as needed.