HTML5 Slideshow

Maybe it’s because I have weak PowerPoint computer hacking skills, but whenever I work on a presentation I find myself thinking, “Shouldn’t this be easier?” or “I’d rather be doing this with CSS.”  So last week when I ran into my usual PowerPoint frustration I decided to devote a little time to correct the problem by writing a simple HTML/CSS/Javascript slideshow app.

You might ask, “Aren’t there already some browser-based presentation tools out there?”  Yes!  There’s HTML Slidy and Eric Meyer’s S5.  There’s also Swinger.  And surely others.  Why didn’t I use one of those?  The truth is that I wasn’t aware of them.  Writing an HTML slideshow tool is not very difficult (at least in the minimalist fashion that I’ve conceived it) and I had finished building it before I bothered to see if others existed.

If you want lots of configuration options, both S5 and HTML Slidy look great.  And as a hosted option Swinger looks awesome.  But if you just want a lightweight tool you can use to display HTML slides in your favorite browser, I think this little thing works well.

What it does

What I wanted was a way to write slides using HTML and CSS, and to be able to display the slides locally on my Mac in Chrome or Firefox, both of which support full-screen viewing.  Since I didn’t have to worry about  lesser browsers it was an easy opportunity to break out the HTML5 (although making it play nice in other browsers is first on my to-do list).

The features are better explained in the demo, but here’s a quick run-down:

  • Each slide exists as a section element inside an HTML document.
  • Javascript wrangles up the section elements and turns them into ordered slides.
  • jQuery is used for a few things, including firing events when new slides are loaded.
  • You can do some simple intra-slide fade-in stuff by giving things a class of “action”.
  • You can advance through the presentation with either your mouse or the keyboard.
Props

Edward O’Connor wrote an interesting post about marking up a slideshow in HTML5.  For the structure of the HTML I followed most of his ideas.

That’s all!  As always, feedback is greatly appreciated.

View the demo
Download from github

Both comments and pings are currently closed.

Discussion

o4tuna

Very nice work!

Here’s a question that I hope will be useful to others, too:

My objective is to create a narrated slideshow. In other words, I would like to associate a segment of recorded audio with each new page and event.

As a test, I tried inserting audio with HTML5’s new “audio” tag, but regardless of where I insert it, it plays the audio recording just as soon as the presentation first loads in a browser.

Looking at the page entitled “Custom events” in your example presentation makes me think that it may be possible to attach recorded audio to a new page load–and a new action, too.

If this isn’t asking for too much of your time, would you mind providing a little more guidance on how to incorporate audio into a Slideshow presentation?

Rob Flaherty

Are you using the autoplay attribute to force the audio to autoplay? By default the audio shouldn’t begin on pageload.

Anyway, yes the custom events I mentioned were intended exactly for things like this. Try this code, which should trigger the audio to play the moment the slide is viewed:

$('html').bind('newSlide', function (e,id) {
    var currentSlide = '#slide' + id;
    
    if ($(currentSlide).has("audio")) {        
        $('audio').get(0).play();   
    }
    
});
Spencer Goldade

Hey Rob,

I made a slideshow but am having trouble getting it to display in ie8. Is this a known error (damn that IE!), or did I bugger something up?

https://www.monkeyslunch.com/2010/07/16/tangents-in-art-and-design/

Thanks!

-S

Rob Flaherty

Hi Spencer,

Try adding the HTML5 shiv to the HEAD section of the HTML file. It should fix most/all of the IE problems. (I’ve been meaning to update the slideshow to make it IE friendly, just haven’t had the time yet. Soon!)

https://code.google.com/p/html5shiv/

Thanks
Rob

Chris Sorensen

Is there a way to get this to work in Safari on the iPad? Screen touches sometimes work to advance the slideshow but often do not. Thanks.

Rob Flaherty

Hi Chris,
It should work. I tested on iPad’s Mobile Safari and it worked for me but I did find that you have to get the gesture just right. Too fast or too slow, or too big a gesture and it doesn’t work. If I remember correctly, short swipes worked better. Btw, I’m using the jQuery Swipe Plugin.

Spencer

Hi Rob, I forgot to come back and tell you that your fix worked. I should of known better/enough to do that on my own! Thanks!

Astor

Really nice work, too bad it doesn’t handle printing well, does anyone know a way to fix this ? Being able to print the presentation as you would print pdf slides would be so nice.

bodhiC

Nice work and a huge help with a current project. However, I’m having one issue. I tried implementing narration using the method you outlined above, but it’s not working how I would like. The audio starts playing on the first slide even though the audio tag is in the second slide. I’m not sure what I’m doing wrong. Any help would be greatly appreciated.

Rob Flaherty

bodhiC,
Thanks. You’re not using the autoplay attribute, right? Do you have a link I could look at?

bodhiC

No, not using autoplay. It’s a project for a client, if it’s okay I’ll send you an email with the link.

Alicia

Hi Rob

How can I add bookmarks from the first slide – Table of contents – to the corresponding slide? I’ve added a link on the to Table of contents.

Thanks.

Alicia

One more thing, how can we also set the slides to be available for offline access? Thanks Rob. It’s been years since I last worked with HTML myself! :) Thank you.

Sagey

To the commented who wanted to sync audio or video to slides. There is popcorn.js

Rick

Hi Rob,

I’m testing this using IE7 and I keep getting an “htmlSlides is undefined” error (on line 136 in your demo).

I found that when I change “../lib/html5shim.js” to “lib/html5shim.js” I get a different error, the same error I get when I use “//html5shiv.googlecode.com/svn/trunk/html5.js”

Any thoughts?

Thanks

Bellasys

I’d like to compliment your Helvetica- I mean, Modern presentation of your website. I don’t criticize the H, but it needs to be used appropriately and you have.

Also, while I’m researching who’s already blazed some trails when attempting to create timing for slides to match better with Music (replacing, to a certain limited extent Flash, per se), I found your alternate links referring to S5, and others to be a helpful inclusion. Maybe not my ticket, and I know I’ll have to write a solution myself, but in this context, those inclusions were welcome links.

So I have to compliment your blogging as well. Of course- maybe I don’t need to tell you how good your coffee is, but I appreciate your article and your blog. Thanks.

Prodyot

Wow!
Great slideshow.
I was looking for something like this.
Thanks bud.

Jim C.

How can I link to a specific slide? What I would like to do is have links within s slide which allow me to jump to other slides.

Great job!

albert

Hi,
How can I add an slide effect any time I flip page.

thx

Rana

Hi Rob, thanks for your nice Demo, it’s very interesting.
I’m wondering if there is a method to add an editor to that presentation ,,, like a Textarea to add some stuff & those stuff are then added to the next slide … Is that possible ? Thanks.