Presenteer.js

						var movingParent = "#presentation1";
						var targetElements = $("#presentation1 > div");
						var options = { centerHorizontally: false };
						var presentation = new Presenteer(movingElement, targetElements, options);
						movingElement.on("click", function() { presentation.next(); });
						presentation.start();

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 }
);

If followElementTransforms is to false, Presenteer will not follow element transforms. In that case, it is not required to include 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

Go fullscreen

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
				
			
			

				Go fullscreen
			

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

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();
				});