edward.js

Presentation tool written in Javascript. Uses jQuery for the javascript main codebase, and CSS for theming and styling.

Install and usage

Get the source, edward.js, and include it along with jQuery in your html file. The source code of index.html is a good example to see how the library is included and the slides content is implemented. The basics are, you must have a container element, and inside that, one or more child elements, usually block tags(ie: articles, divs), with the content of the slides of your presentation.

You can style the presentation with CSS of course. Keep in mind the container element dimensions, as the animations for the transitions are contained inside. Again, see the demo HTML for reference.

Every child element can have data attributes that can change the behavior of the "slide" they represent. Currently there are four tags supported:

• data-transition : the style of the transition used to show that slide. Default is simple

• data-time : The time duration of the transition in milliseconds. Defaults to 800

• data-onshow : Specify code that is executed when the slide is finished it's transition and is displayed fully

• data-onhide : Specify code that is executed just when the slide is beggining to hide

Once your markup is ready, the presentation is initialized with the call

var slideshow = new Edward('#container')

where '#container' is a jQuery selector of your presentation container DOM element.

With the current version of the library, you can manage more than one presentation. Clicking a presentation makes it the current "active" one, and the keyboard events will affect that slideshow. Creating a new instance of a slideshow makes that object the "active" one by default, too.

API

An Edward object has the following methods:

• .show(n)

  Shows the n-th slide, if that slide exists.

• .next()

  Advance to the next slide.

• .previous()

  Shows the previous slide.

• .setActive()

  Set this slideshow as the active one(can be interacted with via keyboard shortcuts)

Extensions

Edward can be extended. Currently, extra transitions can be implemented(see the demo and the edward.trans.js file for an example).

Transitions

To implement a transition, you must implement a new function in the Edward.transitions namespace. This function receives as a parameter a data object, that is generated by the engine. It contains info for the transition in its attributes:

• data.newSlide - a jQuery collection representing the slide being shown

• data.prevSlide - a jQuery collection representing the slide being hide(if any)

• data.time - the time duration of the effect

• data.slideShow - the Edward object representing the global slideshow.

The logic in this function can use jQuery and javascript to fiddle around with the style and markup of the slides, but the last action MUST be data.slideShow.endTransition(). This marks the transition as over within the engine, and also calls the onshow callback(if specified in the slide markup).

The plugin can be stored in any js file, but make sure edward.js library is already lodaded.