Timeliner demo
-
This is HTML text. It could also be flash, embedded video etc.
More examples and technical info below. - This example will repeat automatically. It can also stop at the last slide if you want it to.
Example 1 callbacks: Nothing happened yet.
What's this?
A timed slideshow presentation. Or a jQuery plugin that enables you to easily create one.Including the plugin on your page will turn a <ul> list into a slideshow with the <li>s as slides (see a markup example below). Then style it by CSS -with or without images- and customize the behaviour using the plugin options.
Requirements
jQuery library version 1.3.0+Note that IE9 is fully supported since version 1.5.2.
Features
- Very customizable by CSS & plugin options
- Use any type of html / media types inside the slides
- Use a global or individual slide interval
- Optionaly show / hide most of the features
- 4 transition types (fade, slide, reveal, instant)
- Compatible with all common browsers, even IE6
- Multiple instances on the same page possible
- Optional autoplay
- Optional custom callback functions for most events
- User can click a node to start the associated slide
- User can click the timeline to start the associated slide
- User can pause/resume the presentation
- Keyboard functionality (space = pause/play)
Markup:
<ul id="your_element_id" class="timeliner">
// Minimal setup:
<li>Your slide content here</li>
// Full setup:
<li title="This slide's title" lang="(induvidual slide duration in seconds)">
</ul>
// Minimal setup:
<li>Your slide content here</li>
// Full setup:
<li title="This slide's title" lang="(induvidual slide duration in seconds)">
Your slide content here
</li>
New in version 1.2 (2011 july 25):
- Callback function "start_callback" triggers when the presentation starts;
- Callback function "newslide_callback" triggers when a new slide is activated;
- Callback function "end_callback" triggers when the presentation ends;
- Callback function "paused_callback" triggers when the presentation is paused;
- Callback function "resumed_callback" triggers when the presentation resumes;
-
Callback function "click_callback" triggers when a slide is clicked;
Note: Instructions on using callback functions included in the download package. - New plugin option "controls_always_visible" causes the pause/play/previous/next buttons to never hide.
New in version 1.1 (2011 june 20):
- Changed behaviour: When clicking a node with autoplay off, it now starts paused on that node.
- Slight performance tweaks.
- jquery.timeliner_min.js renamed to jquery.timeliner.min.js
- 1
- 2
- 3
External controls for the example on the left.
-
This one doesn't autoplay.
The buttons on the right have functions in the onclick="" attribute to control this example.
Other differences in this example:- Different dimensions
- Shows the total time
- Shows the slide start time in the node tooltip
- Individual intervals
- Timeline positioning / width / height
- Images used as nodes
- Various CSS styling
- Ending in...3
- Ending in...2
- Ending in...1
- The end.