Plugins

Plugins are a way to package additional functionality into jmpress.js.

Default Plugins

jmpress.js comes loaded with a default set of plugins to handle the common uses.

Translate, Scale & Rotate

This default plugin handles the transformation stuff.

Active Class

This default plugin handles the toggling of activeClass and nestedActiveClass.

Circular Stepping

This default plugin handles the natural flow of the steps, taken from the dom order.

Starting Step

This default plugin handles the config option "start".

Routing

This default plugin handles the data-next and data-prev attributes and the route command.

Ajax Load Steps

This default plugin enables you to load step via ajax. It handles the data-src and href attribute and offers the "afterStepLoaded" event.

Hash in URL

This default plugin handles updates to and change events from the url hash. It also handles clicks on link to other steps.

Keyboard Navigation

This default plugin handles navigation with the keyboard.

Viewport

This default plugin handles camera zooming to window size.

Clickable Inactive Steps

This default plugin handles click on other steps.

Templates

This default plugin handles templates. It handles the data-template attribute and registers the template.

Extra Plugins

jmpress.js also comes with extra plugins located in the /plugins folder that you might choose to use. To load the plugin simply add a script tag including the plugin js file.

Duration

For automatically changing steps after a given duration. Can also use a progress bar indicating how long until the change will occur. It handles the data-duration and data-duration-action attributes. Adds the following config options to jmpress:

duration.barSelector

A jQuery selector to the bar element on which a property should be changed.

duration.barProperty, duration.barPropertyStart, duration.barPropertyEnd

Default: "width", "0", "100%"
Set to property and property values which should be changed. The values are set in on step, so transition should be enabled on element.

duration.defaultAction

Default: "next"
The action that should be executed if no data-duration-action is defined.

duration.defaultValue

The duration that should be taken if no data-duration is defined.

Secondary

Documentation coming soon.

Writing a Plugin

To extend jmpress.js, simply create a new js file and then add the script to your website or presentation HTML. It is wise to wrap your plugin within a closure:

(function( $, document, window, undefined ) {
	// Plugin Code Will Go Here
})(jQuery, document, window);

Now we can add a new option to jmpress by using the defaults method:

(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
})(jQuery, document, window);

Now the config option 'withMeat' will be settable when initiating jmpress and will default to 'Yum! Meat!'. Let's go further and add some more meat to our plugin:

(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
	function meat( step, what ) {
		$(step).html( what );
	}
	$.jmpress('initStep', function( step, eventData ) {
		meat( step, eventData.settings.withMeat );
	});
})(jQuery, document, window);

We have created a 'meat' method available only within our plugin. Then we are calling this method as each step is initialized to replace the HTML in every step to 'Yum! Meat!'.

You can add your own events to jmpress using the 'register' method and then call it upon an event:

(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
	$.extend(true, $.jmpress('defaults').keyboard.keys, {
		77: 'meat' // 'm' key for meat
	});
	$.jmpress("register", "meat", function() {
		var step = $(this).jmpress('active')
		step.html( $(this).jmpress("settings").withMeat );
	});
})(jQuery, document, window);

With this plugin, any time the 'm' key is pressed the active slide HTML will be replace with 'Yum! Meat!'.

Take a look at the core plugins in jmpress.js or the extra plugins in the /plugins folder for more examples.

If you have written a plugin for jmpress.js please let us know!

More documentation coming soon...