The aim of this plugin is to easily build a timeline display for your data.
npm:
npm install jquery-timelineme
classic:
- add jQuery to your project
- add timelineMe css & js
- dynamically add items with json records
- add to bower
HTML
<head>
<link rel="stylesheet" href="css/jquery.timelineMe.css">
</head>
<body>
<div id="timeline-container"></div>
<script src="path/to/jquery/jquery.js"></script>
<script src="path/to/plugin/jquery.timelineMe.js"></script>
</body>JAVASCRIPT
$(document).ready(function() {
$('#timeline-container').timelineMe({
items: [
// Put your timeline items here
{
type: 'milestone',
label: 'my label'
},
{
type: 'smallItem',
label: 'html label',
shortContent: 'html short desc'
},
{
type: 'bigItem',
label: 'html label',
shortContent: 'html short desc',
fullContent: 'html big desc',
showMore: 'show more',
showLess: 'show less'
}
]
});
});The plugin is under MIT License