JQuery Timelinr Vertical Horizontal timeline plug-in (with source code download), jquerytimelinr

JQuery Timelinr Vertical Horizontal timeline plug-in (with source code download), jquerytimelinr

Jquery. timelinr. js is a very cool jQuery timeline plug-in. Jquery. timelinr can be used to create horizontal and vertical timeline effects and can be played automatically. You can use parameters to control the animation effect of each timeline switch.

Recommended reading: I have previously shared a jQuery timeline special effects source code for implementing a brief history of enterprise development. Its interface displays very well.

Download the effect display source code

Usage

To use this timeline plug-in, you need to introduce jQuery and jquery. timelinr. js files on the page.

<script src="js/jquery-1.x.x.min.js"></script><script src="js/jquery.timelinr-0.9.x.js"></script>

HTML Structure

The basic HTML structure of the timeline plug-in is as follows:

<div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum.</p></li><li id="date2"><p>Lorem ipsum.</p></li></ul><a href="#" id="next">+</a> <!-- optional --><a href="#" id="prev">-</a> <!-- optional --></div>

Initialize the plug-in

After the DOM element on the page is loaded, you can initialize the timeline plug-in using the following method.

$(function(){$().timelinr();});

Configuration parameters

Parameters of the jquery. timelinr. js timeline plug-in include:

Orientation: the direction of the timeline. Optional values: horizontal | vertical; default value: 'horizontal '.
ContainerDiv: ID selector of the timeline container DIV. The default value is '# timeline '.
DatesDiv: ID selector of the container that displays the time. The default value is '# dates '.
DatesSelectedClass: class of the selected time. The default value is 'selected '.
DatesSpeed: Specifies the animation speed of the timeline. The value ranges from 100 to 1000, or 'slow', 'normal', or 'fast '. The default value is 'normal '.
IssuesDiv: ID selector of the DIV described in the information. The default value is '# issues '.
IssuesSelectedClass: class of the DIV described by the selected information. The default value is 'selected '.
IssuesSpeed: the animation speed of the DIV described by the information. The value ranges from 100 to 1000, or 'slow', 'normal', or 'fast '. The default value is 'fast '.
IssuesTransparency: the transparency of the DIV described in the information. Value Range: 0-1. The default value is 0.2.
IssuesTransparencySpeed: the speed of the transparency animation. The value ranges from 500 to. The default value is.
PrevButton: ID selector of the forward button. The default value is '# prev '.
NextButton: ID selector of the backward button. The default value is '# next '.
ArrowKeys: whether to allow keyboard control. The default value is false.
StartAt: Index subscript. The default value is 1.
AutoPlay: whether to play automatically. The default value is 'false '.
AutoPlayDirection: the direction of automatic playback. Optional values: forward | backward. The default value is 'forward '.
AutoPlayPause: Specifies the automatic playback interval. Integer: 1000 = 1 second. The default value is 2000.
Github address for jquery. timelinr. js timeline Plugin: https://github.com/juanbrujo/jQuery-Timelinr

The above is about the jQuery Timelinr Vertical Horizontal timeline plug-in, I hope to help you!

Articles you may be interested in:

• TimergliderJS is a jQuery-based timeline plug-in.
• JQuery timeline plugin Usage Details
• JQuery plugin Timelinr for timeline Effects