Get new jQuery plugins just once a week

×

timelineMe

FavoriteLoadingAdd to favorites

March 30, 2016

TimelineMe | jQuery plugin to create a flexible and beautiful timeline

TimelineMe is a jQuery plugin to create a flexible and beautiful timeline

Created by Mickaël Roy

Download

Example

timelineMe plugin

TimelineMe

The aim of this plugin is to easily build a timeline display for your data.

Installation

npm:

npm install jquery-timelineme

classic: - add jQuery to your project - add timelineMe css & js

TODO

Usage

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'
                }
            ]
        });
    });

Demo

See demo project page

License

The plugin is under MIT License

timelineMe

Related posts:

FilteredPaste
midnight-js
mini-preview
timelineMe plugin

http://jquer.in/wp-content/uploads/2015/12/timelineMe.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever