Main menu

H5Slide: HTML5 / jQuery Slideshow

This project was re-written in mid 2012, scroll down to the bottom for more details

A few weeks ago, I wrote a jQuery slideshow app for a personal project. The slideshow ended up being more useful than I originally expected and I realized that it could be re-used in a many different applications with a little more work. Several days later, A List Apart launched “10K Apart: A contest to inspire the web in under 10k.” When I first read about the contest my slideshow app came to mind so I decided to look into ways to make it work for the concept.

Originally, the content of the slides were entered manually to the HTML file but with the help of HTML5′s very handy localStorage and contentEditable features, I added the ability to create the slide content within the browser, saving it as it’s typed. Most conventional desktop slideshows rely on the mouse to add content and navigate which is slow and often frustrating. To avoid this pitfall and improve the work flow, I added simple keyboard commands to easily navigate, update and remove content

One comment on “H5Slide: HTML5 / jQuery Slideshow”

Awesome job!
Did you tweaked it? Will you release the source and walk through?
I really enjoyed it and would like to use for a personal project, if you dont mind. Do you authorise?
A save button to sync it to a server would be my goal, and maybe some graphic suport to drag images from desktop (Desktop Drag-In).

Hi I am Ben Lister, a designer and developer from Chicago. You can follow me on Twitter here.