API
Each step element can have the following data properties set:
- data-x: cartesian coordinates: X Position
- data-y: cartesian coordinates: Y Position
- data-z: cartesian coordinates: Z Position
- data-r: polar coordinates: radius
- data-phi: polar coordinates: angle (starting at top, counterclockwise)
- data-scale: Scale of element (also scale-x, scale-y, scale-z)
- data-rotation: Degree of rotation
- data-rotation-x: Degree of rotation on x-axis
- data-rotation-y: Degree of rotation on y-axis
- data-rotation-z: Degree of rotation on z-axis
- data-delegate: delegate the activeness to another step chosen by selector
- data-src: Load content of slide dynamically
- data-exclude: do not use step in natural flow, but it can be selected with the route command
- data-next: selector of the next step
- data-prev: selector of the prev step
- data-template: apply a template, which must be defined before init jmpress
- even more with plugins
jQuery.jmpress()
$(selector).jmpress({
// jQuery selector to select each step
stepSelector: '.step'
// Class name to give the canvas
,canvasClass: 'canvas'
// Class name to trigger if jmpress is not supported
,notSupportedClass: 'not-supported'
// Customize the animations (or CSS) used
,animation: {
,transitionDuration: '5s'
,transitionTimingFunction: 'linear'
}
});
METHODS
// Next slide
$(selector).jmpress('next');
// Previous slide
$(selector).jmpress('prev');
// Goto a slide
$(selector).jmpress('select', '#slide-id');
$(selector).jmpress('select', $(selector));
// Manipulate the canvas
$(selector).jmpress('canvas', {
transform: 'rotate(7deg)'
});
// Manipulate an element
$(selector).jmpress('css', $('#step-1'), {
transform: 'scale(0.5)'
});
// Set a beforeChange callback
$(selector).jmpress('beforeChange', function( slide ) {
// Called on the start of each slide change
});
Static functions
- css( element, cssAsObject ): applies css with the correct prefix
- [plugin] defaults(): returns the default config, you may add elements in plugins
- [plugin] register( eventName ): register a new event
- [plugin] register( funcName, func ): adds a new function to jmpress
- [plugin] engine(): returns the engine
- [plugin] dataset( element ): returns the dataset of a element
Need to called on jmpress object: $("#jmpress").jmpress("xxx", ...):
- init(): inits jmpress with default config (like impress.js)
- init( config ): inits jmpress
- select( selector ): set the first step matching the selector active
- goTo( selector ): same as select( selector )
- next(): select next step in flow
- prev(): select prev step in flow
- home(): select first step in DOM
- end(): select last step in DOM
- settings(): returns the settings object, you may modify it
- deinit(): deinits jmpress, returning to original state, if already deinited it does nothing
- template( templateName, templateData ): adds or modify a template, if already defined the old template is extends with the new properties.
- apply( selector, templateName ): applies the template to all selected steps
- apply( selector, templateData ): applies template directly by template data object
- apply( selector, arrayOfTemplateDatas ): applies template datas to more selected items
- [plugin] active(): returns the active step as jQuery object
- [plugin] fire( callbackName, element, eventData ): fire a event
- [plugin] canvas(): returns the canvas element as jQuery object
- [plugin] canvas( css ): sets styles on the canvas element and returns it
- [plugin] reapply( step ): reapplies styles on step, should be called after modifying stepData