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

The original project was published at: http://10k.aneventapart.com/Entry/143

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
In mid 2012, I re-wrote the the slide-show and published the project. You can now view or Fork the project on GitHub.

View DemoView Project

One comment on “H5Slide: 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).