Projects Presenteer.js BetterExamples.js FilteredPaste.js

Presenteer.js

Source code at https://github.com/willemmulder/Presenteer.js

Welcome to Presenteer.js. Click in this box to continue.
Presenteer.js a flexible HTML5 presentation tool.
Yet, it needs very little configuration
In fact, it can be used with one simple line of code
For example the code for this slideshow is
var presentation = new Presenteer("#presentation1", $("#presentation1 > div"), { centerHorizontally: false });
We can navigate by calling presentation.next(); or presentation.prev();
The nice thing is that Presenteer follows element-transforms like on this element!
There's also several constructor-options and custom callback functions.
Read on for more!

Visit a screen-filling demo presentation! (best in Chrome or Firefox)

Introduction

Presenteer.js a very flexible HTML5 presentation tool that works in one line of code, but is configurable with constructor options and many callbacks.

In its simplest form, it works like

var presentation = new Presenteer("#presentation", $("#presentation > div"));

And then navigate through the presentation with presentation.start();, presentation.next();, presentation.prev(); and presentation.show(0-based-index);

Installation

Include jQuery and Presenteer.js (and possibly Sylvester.js, see below) in your page.

					<script src="js/jquery-1.8.1.min.js">
					<script src="js/presenteer-1.0.min.js">

Create the HTML and style it with CSS

				
First slide.
Second slide.
Third slide.
Fourth slide.

Then, on page load, create a Presenteer instances for every presentation on the page. For this example, we only have one presentation, so the below code suffices.

var presentation = new Presenteer(
	"#presentation1", 
	$("#presentation1 > div"), 
	{ followElementTransforms: false }
);

I set followElementTransforms to false to make Presenteer not follow element transforms. Only in that case, we don't need the Sylvester matrix library. If you do want Presenteer.js to follow element transforms (e.g. element rotations), also add the Sylvester library to your page

					<script src="js/sylvester/sylvester.min.js">

And set followElementTransforms: true. This is also the default

var presentation = new Presenteer(
	"#presentation1", 
	$("#presentation1 > div"), 
	{ followElementTransforms: true }
);

Constructor options

Apart from the followElementTransforms constructor argument, there's many more options and callbacks. A general Presenteer instantiation looks like this:

var presentation = new Presenteer(canvas, elements, options);

Where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.

It is good practice to wrap the presentation in a containing div with overflow: hidden. This container will act as the viewport for the presentation.

The list of elements on the canvas is specified in the elements argument. It is a list of objects that are any of the following

  1. CSS selector, like "#elm"
  2. jQuery element, like $("#elm")
  3. A Presenteer Object, that looks like
    {
    	element : e, // CSS selector or jQuery object,
    
    	// Direction-independent callbacks
    	onBeforeEnter : function(), // Callback right before e is shown 
    	onAfterEnter : function(), // Callback right after e is shown 
    	onAfterLeave : function(), // Callback right before presentation moves from e to another element
    	onBeforeLeave : function(), // Callback right after presentation moves from e to another element
    
    	// Forward-navigating callbacks
    	onBeforeLeaveToNext : function(), // Callback right before presentation moves from e to the next element
    	onAfterLeaveToNext : function(), //	Callback right after presentation moves from e to the next element					
    	onBeforeEnterFromPrev : function(), // Callback right before presentation moves from the previous element to e
    	onAfterEnterFromPrev : function(), // Callback right after presentation moves from the previous element to e
    
    	// Backward-navigating callbacks
    	onBeforeLeaveToPrev : function(), // Callback right before presentation moves from e to the previous element
    	onAfterLeaveToPrev : function(), // Callback right after presentation moves from e to the previous element 
    	onBeforeEnterFromNext : function(), // Callback right before presentation moves from the next element to e
    	onAfterEnterFromNext : function(), // Callback right after presentation moves from the next element to e
    }

And options is an object with the following defaults

{
	showOriginalMargins : false, // When showing an element, also show its margins
	centerHorizontally : true, // When showing an element, center it horizontally
	centerVertically : true, // When showing an element, center it vertically
	followElementTransforms: true, // Follow element transforms like rotation. If true, requires the Sylvester matrix libraries.
	transition: { // Use this as a transition for the presentation
		"transition-delay" : "0s",
		"transition-duration" : "0.5s",
		"transition-property" : "all",
		"transition-timing-function" : "ease"
	},
	useExistingTransitionIfAvailable: true, // Use the transitions as defined in the CSS. Will not work for Opera and IE
	onBeforeEnter : function(elm) {}, // Global callback right before presentation moves to element elm
	onAfterEnter : function(elm) {}, // Global callback right after presentation moves to element elm
	onBeforeLeave : function(elm) {}, // Global callback right before presentation moves from element elm to another element
	onAfterLeave : function(elm) {} // Global callback right after presentation moves from element elm to another element
}

Navigation

Once we have created a presentation with

var presentation = new Presenteer("#presentation", $("#presentation > div"));
we can call the following commands to navigate through the presentation

Go to the first element by doing presentation.start();

To go forward, call presentation.next();. If the end of the presentation is reached, the first element will be shown again.

To go back, call presentation.prev(); or presentation.previous();. If the start of the presentation is reached, the last element will be shown again.

To go to an arbitrary element, call presentation.show(index); where index is 0-based.

Examples

1. Two coupled presentations

Woo, that's a nice slide-counter at the right side! Click!
90 degree ROTATION
And back! That's it for this demo. Click to restart.
3
2
1
.

HTML

			
Woo, that's a nice slide-counter at the right side! Click!
90 degree ROTATION
And back! That's it for this demo. Click to restart.
3
2
1

Code

			var presentation2_counter = new Presenteer(
					"#presentation2_counter", 
					$("#presentation2_counter > div")
				);
			
				var presentation2 = new Presenteer(
					"#presentation2", 
					$("#presentation2 > div"), 
					{ onAfterEnter : function(elm) { setTimeout(function(){presentation2_counter.prev()},1); } }
				);
				
				$("#presentationcontainer2_counter").on("click", function() { presentation2.next(); });
				$("#presentationcontainer2").on("click", function() { presentation2.next(); });
				presentation2_counter.start();
				presentation2.start();
				$("#presentation2fullscreen").on("click", function() { presentation2.fullScreen($("#coupledpresentations")); });

2. Presentation with slide-indicator

First slide.
Second slide.
Third slide.
Fourth slide.
.

HTML

			
First slide.
Second slide.
Third slide.
Fourth slide.

Code

			$(window).load(function() {
					// Create the HTML for the indicator
					$("#presentation3 > div").each(function(index,elm) {
						$("#presentation3_counter").append("
" + (index+1) + "
"); }); var presentation3_counter = new Presenteer( "#presentation3_counter", $("#presentation3_counter > div"), { centerHorizontally: false } ); var presentation3 = new Presenteer( "#presentation3", $("#presentation3 > div"), { onAfterEnter : function(elm) { setTimeout(function(){presentation3_counter.show(presentation3.getCurrentIndex())},1); } } ); $("#presentationcontainer3_counter").on("click", function() { presentation3.next(); }); $("#presentationcontainer3").on("click", function() { presentation3.next(); }); presentation3_counter.start(); presentation3_counter.prev(); presentation3.start(); });