jQuery Presentation Plugin: Say NO to Keynote!
2010 39
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.
Looks fantastic.
Opera also has a ‘Show’ function that supports presentations
http://www.opera.com/browser/tutorials/operashow/
It takes advantage of CSS media types, and you can navigate it much like you would in Keynote or PowerPoint.
Cool. Glad to see someone put this idea into a plugin. Looks a lot like what I’ve been using
http://pres.learningjquery.com/getting-involved/
Mike Alsup also has a brilliant jQuery Cycle plugin. I use it ever since I found it! But yours is actually simpler and probably lighter which is useful in some cases. Nice job, Trevor!
http://malsup.com/jquery/
Great idea for a plugin Trevor, and nice touch on the left/right keyboard nav! One of my co-workers experienced the dreaded corrupted Keynote file issue this week. That’s another reason to consider using a different approach to creating presentations.
This is nice and fancy but what about hosting a PDF? I think transitions are unnecessary and you’d have easier control over the layout...and I’d hope to goodness any computer would have at least Reader installed on it.
This seems like a lot of work for a simple purpose. Printing that might not be ideal as well.
@Brian Bates:
PDFs are (relatively) static, and they don’t allow for code demos. I can’t imagine using a PDF for giving a presentation. Sounds really awkward. As for printing, that’s what print stylesheets are for. In fact, I’d say printing is much better when you have complete control over its formatting in a way that doesn’t affect the “presentation mode” display.
Very very nice! Will try to use it someday. :)
@Karl-
Thanks. Your example looks like it has a lot of additional features too!
@Brian Bates-
Yeah, what Karl said is what I was thinking. I specifically wanted to include code samples and demos, so if I did a PDF, I would be going back and forth between the PDF and a browser.
Thanks for sharing this. I’d like to see an option, to turn off the fade in/out transition.
Great plugin! I’m really enjoying your jQuery posts.
This reminds me a lot of Eric Meyer’s s5: http://meyerweb.com/eric/tools/s5/
@Jim Arment-
Glad you are enjoying the articles. What kind of transition would you like to see? Just a show/hide?
Absolutely interesting. I agree with you. PP presentations take a lot of time to busy entrepreneurs. Thank you for sharing!
@Trevor-
Show/hide and fade are the only two I would use.
Seems like maybe unnecessary to bind all keypresses to slide advancing (at least that’s what’s happening in Safari).
Really a nice idea and a greate realization ;)
Just a few suggestion:
1. Frequently, changing window size or screen resolution, the bottom bar may overlaps the slide text. It seems to me very ugly: http://bit.ly/c2C5WW . Maybe you should provide a way to disable the bottom-bar or to change its opacity.
2. Add more effects :) slide up/down and slide left/right would be really nice.
Looks good, but mind other resolutions…
In my (widescreen 1280x800) resolution, the content exceeds the navigation banners.
I am loving it. I am using it for a online slideshow for my work portfolio. Thank you for your work on this!
I hate to be a downer, but what are you *really* gaining here? Unless you are going to show the code and execute it in-line with your slides, I don’t see what’s changed. Instead of switching from PP/Keynote to the code and demo, you’re just going to be changing browser windows/tabs. Am I missing something?
@Jim Arment-
I’ll see if I can add that kind of functionality soon.
@Andrew-
I just realized that too. I’ll fix that soon.
@Luciano M-
I wasn’t thinking you would just straight up take my CSS and use it. This was just an example, and everything can be modified by CSS.
@Maarten Dijkstra-
You can modify the CSS to have it look however you want. This was just a demo.
@Matt-
That’s exactly the point. I’m going to be demoing and showing code samples within the slides.
this jquery presentation plugin is awesome! with the biggest benefit - not having to switch back and forth between two apps! Plus it’s SEO friendly.
What’s the difference between your plugin and http://www.w3.org/2005/03/slideshow.html ?
Looks nice! Could prove very useful but what about nesting elements/sequences within slides? That would allow you to have different parts to your slide like asking your audience a question, then on the same slide make the answer appear (trying to illustrate..) without going to the next slide.
That could end up very useful in my opinion if you created an easy way to do that. Haven’t checked all the code so bear with me if you already have that functionality.
Thanks!
@Javier-
Mine is built on top of the jQuery framework. So if you need a standalone thing, the w3c one might be better for you.
@Ludo-
I was trying to keep it relatively light-weight, so I was only doing a slide by slide presentation. I’m sure you could fork the plugin and add it relatively easily.
Looks good, Trevor, but what’s with checking the minified code into github? That’s just weird.
I’ve just pushed an updated version to github that fixes the keyboard navigation so that only the left and right keys navigate through the slideshow. I also added a show/hide transition and a slide transition. This is all updated in the readme file.
@malsup-
I figured if anyone wanted to edit it, they could use a JS beautifier. I think I have the full original version at work that I can add to the repo on Monday.
Really, really nice work! Congrats and thanks.
I was wondering if I could implement it in the Drupal CMS (It would then required to be licensed under GPL, which might not be your favourite licence… but still… )
I will use it for my speak at Drupal Dev Days, that’s for sure! :)
I remember that a few years ago, when I discovered jQuery and animations, I played with this stuff. I wanted to do 3D transitions, but the browsers weren’t ready
/me off to look for html-in-canvas status again
Thanks Trevor, your plugin will be really useful, I just asked it, because someone will ask :). You can create templates with your approach, what do you thing?
Amazing. Looks great!
@Javier Ferreira-
Are you asking me if you can create templates? I’m not sure what you mean by templates.
Like Power Point you have layouts.
@Javier Ferreira-
Sure, you could easily do that with CSS. My CSS is just a simple example of what you can do. I’m not expecting people to just grab my CSS and use it without modifying it.
That’s a good imput. Why sould work a webdesinger with weaky software if he can do it better? Thumbs up!
Thanks Trevor Your plugin will be really cool
Thanks man, i was searching for such simple plugin!
this is awesome plugin. I can use this for my next web presentation. Thank you
Awesome! That is a really nice idea. It’s not only a nice idea to present webcode directly to the audience, but also a cool way of sharing a presentation over the web so everyone (who has not exactly your presentation-tool installed) can see the presentation one or more times later on.
My impression for improvement: of course more effects, but more than just like that a way to present lists (<ul>) point by point with a nice effect like fade-in. You could do that with <ul class="fade_in"> or so.
Thank you
Ras
Nice plugin trevor , jus i have same thought of creating a presentation plugin in JQuery. But I’m a bit late it seems. :(
Any how i like to add some effects and features to the slides to make it more close to MS power point. I will start on this.
Thanks for sharing this.
This is a great use of jquery. I’m always for open source and accessible solutions. Nothing is more accessible than a presentation almost anyone should be able to view in a browser.
Next entry: Terminal Aliases for Git: Two Simple Steps
Previous entry: The Secret Ingredient for Innovation
Recent Comments
@Yannick: Thank you! As for choosing Drupal for the calendar, that’s a question best suited for our partners at Lafayette College. From what I know, I don’t think WP was able to support...
- Tom Osborne on 'Behind the Scenes: Lafayette College'.
- Jason on 'Consumption: How Inspiration Killed, Then Ate, Creativity'.
- Yannick L. on 'Behind the Scenes: Lafayette College'.
Subscribe to Comments RSS