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
sectionelement inside an HTML document. - Javascript wrangles up the
sectionelements 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.
o4tuna
June 27th, 2010
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
June 28th, 2010
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
July 21st, 2010
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?
http://www.monkeyslunch.com/2010/07/16/tangents-in-art-and-design/
Thanks!
-S
Rob Flaherty
July 21st, 2010
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!)
http://code.google.com/p/html5shiv/
Thanks
Rob