Close and Go BackBack to Viget

jQuery Presentation Plugin: Say NO to Keynote!

Trevor Davis
Trevor Davis , ON THE TOPIC OF Javascript
3/24
2010

I think I’m going to stop using Keynote & Powerpoint forever.

At Viget, we get the opportunity to present a topic to the rest of the company; we call them Lab Shares. This gives us all the chance to work on our presentation skills and to help educate others. I’m giving my presentation next week and will talk about CSS3 transforms and transitions. Obviously, I will be providing a lot of code samples and examples, so if I were to use Keynote, I would be going back and forth between the browser and Keynote. Yeah, no thanks.

So, I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github.

You can navigate the presentation by using the left & right arrows, the previous & next links, and the individual page links. The plugin is very basic, and here is an example of the markup:

<div id="slides">
  <div class="slide">
    Slide 1
  </div>
  <div class="slide">
    Slide 2
  </div>
  <div class="slide">
    Slide 3
  </div>
</div>

Then, make sure you include the jQuery library and my presentation plugin, and then you can call it like this:

$(document).ready(function() {
  $('#slides').presentation();
});

And that’s it. There are a few options you can pass in that are documented on github, but most people probably won’t need them.

So check out the demo and download it. Let me know if there is anything you think I can add to the plugin in the comments.

blog comments powered by Disqus

We're The Designers

at Viget Labs. We write about design news, trends, techniques, buildout, inspiration, CSS, and our projects.

What's a-twitter?

Follow us @VigetInspire for updates of the goings-on here or @Viget for more from all of the Viget crew. #thatisall

Contact Us

Have any questions, comments, ideas, or secrets to share? Let us know.


What is the third letter in apple?

Sorry, you need to have Javascript enabled to use this form. (Don't blame us, blame the spammers!) If you'd like to contact us, please visit our Contact page.