This time I will share jQuery Plugin and tutorial about Simple jQuery Timeline Plugin – Timelinr, hope it will help you in programming stack.
| File Size: | 624 KB |
|---|---|
| Views Total: | 39400 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Timelinr is a simple jQuery Timeline Plugin that makes it easy to create awesome timeline effects for your website. It supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.
How to use it:
1. Include jQuery Library and Timelinr.js
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
2 |
<script src="js/jquery.timelinr-0.9.52.js"></script> |
2. Inicialize the plugin
1 |
<script> |
2 |
$(function(){ |
3 |
$().timelinr({ |
4 |
autoPlay: 'true', |
5 |
autoPlayDirection: 'forward', |
6 |
startAt: 4 |
7 |
}) |
8 |
}); |
9 |
</script> |
3. Options with default values.
01 |
$(function(){ |
02 |
$().timelinr({ |
03 |
orientation: 'horizontal', |
04 |
// value: horizontal | vertical, default to horizontal |
05 |
06 |
containerDiv: '#timeline', |
07 |
// value: any HTML tag or #id, default to #timeline |
08 |
09 |
<a href="https://www.jqueryscript.net/time-clock/">date</a>sDiv: '#dates', |
10 |
// value: any HTML tag or #id, default to #dates |
11 |
12 |
datesSelectedClass: 'selected', |
13 |
// value: any class, default to selected |
14 |
15 |
datesSpeed: 'normal', |
16 |
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal |
17 |
18 |
issuesDiv : '#issues', |
19 |
// value: any HTML tag or #id, default to #issues |
20 |
21 |
issuesSelectedClass: 'selected', |
22 |
// value: any class, default to selected |
23 |
24 |
issuesSpeed: 'fast', |
25 |
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast |
26 |
27 |
issuesTransparency: 0.2, |
28 |
// value: integer between 0 and 1 (recommended), default to 0.2 |
29 |
30 |
issuesTransparencySpeed: 500, |
31 |
// value: integer between 100 and 1000 (recommended), default to 500 (normal) |
32 |
33 |
prevButton: '#prev', |
34 |
// value: any HTML tag or #id, default to #prev |
35 |
36 |
nextButton: '#next', |
37 |
// value: any HTML tag or #id, default to #next |
38 |
39 |
arrowKeys: 'false', |
40 |
// value: true/false, default to false |
41 |
42 |
startAt: 1, |
43 |
// value: integer, default to 1 (first) |
44 |
45 |
autoPlay: 'false', |
46 |
// value: true | false, default to false |
47 |
48 |
autoPlayDirection: 'forward', |
49 |
// value: forward | backward, default to forward |
50 |
51 |
autoPlayPause: 2000 |
52 |
// value: integer (1000 = 1 seg), default to 2000 (2segs)< }); |
53 |
54 |
}); |
4. Markup
01 |
<div id="timeline"> |
02 |
<ul id="dates"> |
03 |
<li><a href="#1900">1900</a></li> |
04 |
<li><a href="#1944">1944</a></li> |
05 |
<li><a href="#1950">1950</a></li> |
06 |
<li><a href="#1971">1971</a></li> |
07 |
<li><a href="#1999">1999</a></li> |
08 |
<li><a href="#2001">2001</a></li> |
09 |
<li><a href="#2011">2011</a></li> |
10 |
</ul> |
11 |
<ul id="issues"> |
12 |
<li id="1900"> |
13 |
<img src="images/1.png" width="256" height="256" /> |
14 |
<h1>1900</h1> |
15 |
<p>...</p> |
16 |
</li> |
17 |
<li id="1944"> |
18 |
<img src="images/3.png" width="256" height="256" /> |
19 |
<h1>1944</h1> |
20 |
<p>...</p> |
21 |
</li> |
22 |
<li id="1950"> |
23 |
<img src="images/4.png" width="256" height="256" /> |
24 |
<h1>1950</h1> |
25 |
<p>...</p> |
26 |
</li> |
27 |
<li id="1971"> |
28 |
<img src="images/5.png" width="256" height="256" /> |
29 |
<h1>1971</h1> |
