Timeliner

Note that full documentation, instructions, examples and documented, commented source code are included in the download package.

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
• Click a node to start the associated slide
• Click the timeline to start the associated slide
• Pause/resume the presentation
• Keyboard functionality (space = pause/play)

Changelog

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

Implementation

Note that full documentation, instructions, examples and documented (full of comments) source code are included in the download package.

Example 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)">
		Your slide content here
	</li>
</ul>

More detailed documentation is included, along with the commented source files.

Support

Difficulty with implementing:

1. Check out the instructions page (included in the package)
2. Check out the example pages and their HTML source code to see how it's done (included in the package)

Can not get it/something to work:

• Do the example pages work in your situation? That means something went wrong in your custom implementation. Try comparing them or starting out by modifying one of the sample pages step by step.
• Look for your issue in the Timeliner FAQ
• Look for your issue on the Timeliner comments page
• Post a comment with your question / request
• Email the author directly at please@frique.me