Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (67 sloc) 3.56 KB


jqPresentation is a jQuery plugin that creates PowerPoint-style slideshows from web pages.


  • Reads semantic, standards-compliant HTML
  • Supports jQuery UI animations
  • Tracks current position in the address bar for browser navigation support
  • Short Demo
  • Long Demo


  • Press Up or Down to navigate by one item
  • Press Page Up or Page Down to navigate by one slide
  • Press Home or End to jump the the beginning or the end of the entire presentation
  • Use the scroll wheel to navigate by one item (requires mousewheel plugin)



#Instructions Use the following markup:

<article class="Presentation">
	<section class="Slide">
		<h1>Slide Title</h1>
		<p class="Item">
			This element will slide down when you click.
	<section class="Slide">

Tag names don't matter; use whatever elements you like. The contents of each slide also don't matter; slides can hold whatever you like. By convention, all slides should have an <h1> containing a slide title; the standard (blue) theme integrates the slide title into the slide design.

To create sequential animations within slides, add class="Item" to elements in the slide. All Items will be hidden when the slide is first entered, and will appear one by one as you navigate forwards.
After creating your markup, call


If you add an ID to a slide or item, navigating to YourPage#YourID will automatically jump to that point.

If you use the SyntaxHighlighter script, you must include the following compatibility hack for jQuery:

if (XRegExp) {
    var xExec = RegExp.prototype.exec;
    RegExp.prototype.exec = function (str) {
        if (!str.slice)
            str = String(str);
        return, str);

You may also want my SyntaxHighlighter theme to match my standard blue presentation theme.

#Item Animations You can apply different animations to items by setting the data-animation attribute (case-insensitive). jqPresentation includes two animations: fade and slideDown. If jQuery UI is present, all of its effects are also available as animations.

You can create a custom animation like this:

Presentation.animations.customeffect = {
	show: function(elem, callback) { ... },
	hide: function(elem, callback) { ... }

The effect name must be lower case. elem is a jQuery object containing a single element to animate, and callback must be called after the animation is complete.

A sample custom animation can be found at the end of the Introducing jQuery presentation.

#License Dual licensed under the MIT and GPL licenses, just like jQuery