Installation

Download

You can download this project in a zip format.

Via Terminal

$ wget https://github.com/vindm/Present/archive/v1.0.zip
$ unzip v1.0.zip

Via Git

$ git clone git://github.com/vindm/Present.git

Load

Link the component and a stylesheet from your page.

<link  href="stylesheets/present.css" rel="stylesheet"/>
<script src="javascripts/jquery.min.js" ></script>
<script src="javascripts/present.min.js" ></script>

Usage

HTML

<section class="presentation">

    <!-- First slide -->
    <article>
        <!-- Slide content -->
        ...
    </article>

    <!-- Second slide -->
    <article>
        <!-- Slide content -->
        ...
    </article>

    <!-- More slides -->
    ...

</section>

JS

$(function() {
    $('.presentation').present( [ options ] );
});

Customization

You can override Present's default options by passing your own custom options and callbacks as the first argument to the .present() plugin.

Here's a quick snippet with all defaults declared so you can copy and paste into your project:

$('#presentation').present({

initialScale : 85,     // percentage value to scale on init
initialTheme : 'Dark', // choose between Dark or Light
slideTimer   : 4500,   // how long (in milliseconds) slides should be shown in play mode
stepTimer    : 1500,   // how long (in milliseconds) steps should be shown in play mode

playOnInit   : false,  // whether or not to automatically begin playing the slides
bindToHistory: true,   // whether on not to modify browser's history
controlPanel : true,   // whether or not to add a control panel
loopPlay     : false,  // whether or not to loop playing the slides
scaleOnResize: true,   // whether or not to scale the slides on window resize
transition   : true,   // whether or not to use slide transitions
userEvents   : true,   // whether or not to bind user events to slides controls

onReady      : $.noop, // gets called when present is setup and ready to go
onPlay       : $.noop, // gets called when the play() method is called
onStop       : $.noop, // gets called when the stop() method is called
onPause      : $.noop, // gets called when the pause() method is called
onRestart    : $.noop, // gets called when the restart() method is called

});

Simple slide with header and text (small font)

This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text.

There is more text just underneath with a code sample: 5px.

Slide with bullet points (small font)

• Use this template to create your presentation
• Use the provided color palette, box and arrow graphics, and chart styles
• Instructions are provided to assist you in using this presentation template effectively

Slide with a table (smaller text)

This slide has some code (small font)

<script type='text/javascript'>
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i >= 0;) {
      alert('Hello ' + String(world));
    }
  }
</script>
<style>
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
</style>