S5key: Slideshow Launcher

Some of you may be aware of S5: the Simple Standards-based Slide Show System from Eric Meyer. It's a simple combination of HTML, CSS and JavaScript for creating slideshows. No Powerpoint required.

S5key, is a Keynote-inspired addition that offers up some additional functionality. Now, I say "inspired" because to be honest, I've never used Keynote. The screenshots, however, looked neat and felt that I could implement something similar for s5.

What is S5key?

S5key will launch the slideshow into three windows: a new window — to be placed on the second monitor for your audience — and two iframes in the current document — one to hold the current slide and another to hold the next slide. Clicking anywhere on the page or using the keyboard shortcuts will iterate each slideshow accordingly.

Before getting into the demo, I want to mention some really quick stuff. Most importantly, I've only tested this in Firefox. In fact, it definitely doesn't work in Internet Explorer because of the event handling. I'll try and get around to fixing this later.

Okay, now go check out the demo. I've prepopulated the text box with the demo slideshow on my server. Just click on "launch" to get things going.

Features

  • It has a clock. It's currently in 24 hour time only. The ability to switch this up to 12 hour time is on the to-do list.
  • It has a timer. Click on the timer and it'll start. Click on it again and it'll stop. Click on it again and it'll restart the timer from zero.
  • It will display notes. More accurately, it pulls out the "handouts" element for each slide and displays it in a notes box at the bottom.
  • It displays the next slide. It currently doesn't show the incrementals, just the next slide.

Caveats

This is very much untested and I really just wanted to share my weekend project. The biggest thing you might run into is popup blockers. For example, I use a Firefox extension for redirecting new windows into new tabs. I had to disable this in order to have the main slideshow open up in a new window that could be placed on the second monitor.

Currently, images are not dynamically resized in S5. This means that larger images may get cut off in the smaller iframe. Here's hoping you know your material well enough not to be thrown by clipped images. Your main slideshow will still be fine, it's just the iframe's that are affected.

Items of interest

The core S5 code could be rewritten to better handle extensibility. It works great for what it is intended to do but it would have been made easier by being able to tie into just one or two events or through some callback mechanism. It's often hard to anticipate how others might extend the stuff we build so I certainly don't fault the original developers for this.

Finally, this is offered up as Public Domain, just like S5 itself.

Download S5key | View the demo

Published July 10, 2006 · Updated September 14, 2006
Categorized as JavaScript
Short URL: http://snook.ca/s/623

Conversation

13 Comments · RSS feed
Gabrusch said on July 10, 2006

Sometimes it's crazy what HTML, CSS and Javascript can do and I always thought about doing professional presentations with HTML.

But for common everyday presentations you give within businesses or at events Powerpoint is much easier. It's just would be too much of an ideological thing to create them with HTML.

For an company profile you would give away on CDs it would be great, but for the others mentioned I don't see the real big advantage here.
(Except, of course, you don't have Powerpoint)

Graham B said on July 10, 2006

Kudos - pretty damn neat, but as was said above, its hard to see a real advantage over Powerpoint (besides being free...). Biggest issue I can see is navigation - what do I do if I want to go back a slide unless a link is included at every stage in the presentation?

Jonathan Snook said on July 10, 2006

Thanks. The two big pluses with S5 are that it's free and that it's easier to distribute.

As for navigation, the slideshow system supports all the keyboard shortcuts as the original S5. That means things like right arrow and left arrow can be used to navigate forwards and backwards through the slides.

Nick Cowie said on July 10, 2006

Jonathan thank you for S5key it should make my next presentation a little easier.

Gabrusch and Graham, the advantages of s5
It is free
You do not need to install software to create/edit your presentation (notepad, simpletext, even vi will do)
You can create/edit/display your presentation on any computer or OS. My last presentation was created/edit/presented on 2 windows machines, a Mac and a Linux box and only one had Powerpoint installed.
You can distribute it easily over the web, you do not need special software to view the presentation over the web, any browser will do.
If (like me) you are doing a presentations that includes HTML, you include the HTML in the S5 and it does not have to be static, unlike Powerpoint or Keynote (were you have to keep updating static screen shots if you update the HTML).

Fredrik Wärnsberg said on July 10, 2006

Very neat work with good functionality. I'll look into using this the next time I have to make a presentation.

Graham B said on July 11, 2006

Thanks for pointing that out Jonathan, stupid me! Makes a lot more sense now.

Nick, I see your points as they are valid for pretty much any app that is ported to a browser environment. I just meant that - for me at least - Powerpoint is unbeatable for sheer drag n drop usability. Any presentations I do probably won't have hours of creation work involved, so to sit about editing HTML is just drawing out the process. For others it could be a lot different.

Raymond Olavides said on July 11, 2006

Just in time for my first presentation using s5. Thanks for taking/giving s5 into new possibilities and features.

Eric Meyer said on July 12, 2006

This is t3h awesome. It's the perfect addition to the existing "notes" view in S5 1.2. I've seen other attempts at slide previews in the notes view but this is the best I've seen so far. Now to just get the S5 source open (read: out of my personal hands) and this kind of thing can get into the 'official' code base...

Jason Kataropoulos said on July 13, 2006

I think that S5 is amazing. Very well thought and implemented.

Just think what the potential is if content is dynamically server from a datastore, lets say withe some help from AJAX!

To me, it sounds very powerfull!

Guido Marc said on November 11, 2006

Well done Jonathan, i have done a presentation based on your Slideshow Launcher, it works perfect....

Andreas said on January 01, 2007

thanks for develop this, for some situation, now I don`t have to Use Power Point ,-) One more step on the way to work without Microsoft :)

fee said on April 07, 2007

Thanks. The two big pluses with S5 are that it's free and that it's easier to distribute.

Hochzeitsfilm -er said on June 14, 2007

Not easy to understand for me with my english, but now I´m making my first presentation with Slideshow Launcher and I like it. So I´ve now more posibilities than Powerpoint

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.