jmpress.js documentation

Basic Usage

Create a root element:

<div id="jmpress"></div>

Fill it up with steps:

<div id="jmpress">
    <div class="step">Slide 1</div>
    <div class="step">Slide 2</div>

Tell jQuery to run it:

$(function() {

Configure jmpress

    stepSelector: 'li'

Customize the hash id of each slide The id of the step will appear as the URI hash to recall the slide later. If you don't give your steps ids then the id step-N will be used.

<div id="name-of-slide" class="step" 
        data-x="3500" data-y="-850" 
        data-rotate="270" data-scale="6">
    Slide 1

Structure of the remaining docs

The stuff in the remaining docs has three categories:


A property can be set while initializing jmpress or modified on runtime.

While initializing Just pass a object to the jmpress init function containing the property

    setting: value

On runtime You can run the method "settings" to the the current settings object, which contains all properties. Not every property can be modified after initializing. Many properties apply only after the next selection process, which is triggered i. e. on step changes. You may need to trigger it manually with $('#jmpress').jmpress('reselect').

$('#jmpress').jmpress('settings').setting = newValue;


A method is a public function available on a jmpress instance or statically.

A method with the signature methodName(param1, param2) can be called like this:

// on the jmpress instance
$('#jmpress').jmpress('methodName', param1, param2);
// statically
$.jmpress('methodName', param1, param2)


You can set a callback for a jmpress event, which is called when the event occurs.

// add an event handler
$('#jmpress').jmpress('callbackName', function(step, eventData) {...});

A callback handler should have the following parameters:

You can also add a callback handler by adding it to the options object on jmpress.js init:

  // You options
  callbackName: function(step, eventData) {...}

Edit This Page