HTML5 / jQuery Slideshow

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 (up and down arrows) and add / remove slides (ctrl+A / ctrl+D).

I plan to release the full source of this project and do a code walk through soon but in the meantime, you can view and vote for the project on the 10K Apart website:

View the Project

Features

Fully editable slides
Ability to quickly and easily Add / Remove slides
Persistent content (saved “on the fly” with localStorage)
Arrow key navigation
Two themes
Light weight (under 10k not including jQuery)

 

Technologies used

localStorage
contentEditable
CSS3 Radial Gradients
RGBa
Border Radius
Box Shadow
Text shadow

View the Project

One comment on “HTML5 / jQuery Slideshow

  1. 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).