#jqPresentation
jqPresentation is a jQuery plugin that creates PowerPoint-style slideshows from web pages.
#Features
- Reads semantic, standards-compliant HTML
- Supports jQuery UI animations
- Tracks current position in the address bar for browser navigation support
- Short Demo
- Long Demo
#Controls
- 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)
#Dependencies
##Optional:
- jQuery UI effects (for additional item animations)
- mousewheel plugin (for scroll wheel navigation)
#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. </p> </section> <section class="Slide"> ... </section> </article>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
$('.Presentation').presentation();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:
//http://blog.slaks.net/2011/09/xregexp-breaks-jquery-animations.html if (XRegExp) { var xExec = RegExp.prototype.exec; RegExp.prototype.exec = function (str) { if (!str.slice) str = String(str); return xExec.call(this, 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
