labibllaca / dizzy.js

Prezi-like Presentations without Flash, using SVG and Javascript

dizzy.js

dizzy.js enables you to create non-linear presentations similiar to
Prezi, without using Flash or some other proprietary technology.

For a quick start, try using presenter.html, appending the path of one of the examples as the URL hash.
(Example: <file:///home/erlehmann/src/dizzy.js/presenter.html#examples/upside-down-zoom.svg>)

Usage

SVG

Dizzy makes extensive use of SVG groups. First, “slides” are groups with the class “group” and one or more class “group_n”, where n is a positive integer signifying the position of the “slide” in the presentation. Second, all “slides” have to be in one SVG group with the id “canvas”.

To impress the audience properly, SVG transformations should be applied to the “slide” groups.

Javascript

Just create a new Dizzy object and pass a selector for a dom node thats used as container.
var dizz = new Dizzy(‘#dizzy’);
You can also pass options to the Dizzy() function. See the wiki for a description of all options.
var dizz = new Dizzy(‘#dizzy’, {pannable: true, transformTime: 1000});
Afterwards you can load a new SVG-file with:
dizz.load(‘./file.svg’);
optional pass a callback:
dizz.load(‘./file.svg’,
function(){ // gets executed once file.svg has been loaded.
dizz.show(0); // display canvas untransformed.
} );

To navigate through the presentation just call the methods next(), previous() or show(n) on the dizzy object.

Browser support

See Browser support in the wiki

To do

- Bugfixing
- Zooming and panning
- moar jQuery
- More tools in editor (draw lines, circles, frames..)

License

dizzy.js is licensed under the terms of the MIT License, see “LICENSE” file in repository.