Photo fades and then some
A while I back I pointed to the JavaScript-driven photo fade-in effect on Scott Upton’s Couloir, and explained an accessible cross-browser version of the code. Since then Scott has taken things to the next level with a resizing, fading slideshow. He’s produced two demos to compare and contrast:
The JavaScript demo has been written entirely in object oriented code (must get to grips with that), using Travis Beckham’s API to detect when the next photo has arrived in the browser. Impressive stuff.
Now then, I appreciate that what Scott has created is a demo, but that said I’m going to be pick nits as the JS slideshow can be improved still further. As it stands the JS demo mirrors the Flash demo almost exactly, including the inherent problems with accessibility and bookmarking. So here are some ideas for reintroducing those qualities back to the JS version.
First off it should be stressed that the slide show is contained in a single HTML document, using JavaScript to load in images when required. The point here is that images are only loaded when they are required, replicating the on-demand streaming of the Flash movie, so the temptation to use a show-hide script with a list of hidden images needs to be avoided.
Bookmarking
Bookmarking of individual images is prevented because the link to the next image is through a direct JavaScript call:
<a href='javascript:nextPhoto()'>This could be changed to:
<a href='#2' onclick='nextPhoto()'>Where ‘2’ is dynamically incremented by the script as the slide show is traversed. Because the link is to a local anchor (albeit a non-existent one) the page won’t reload but the URL in the browser address bar will still update and hence can be bookmarked. The script would obviously have to base its choice of image by parsing the URL for the number. See this crude demo.
Accessibility
All reference to photos in the slideshow demo is held in a JavaScript array. Thus if you have JavaScript turned off you will not be able to view or navigate to any photos.
Some options are still open, all of which are crude compared with the JavaScript enhancements, but the bottom line is they work.
A list of links to all the images could be added, hidden inside a <noscript> element – this would be enough for a user to view any image. This experience could be enhanced slightly if images are opened into an iframe, sized with the maximum dimensions of all photos and again hidden inside a <noscript>. We could be clever and dynamically create the JavaScript array from the list, although the list would have to be outside a noscript (presumably hidden with CSS) in order for it to be accessible through the DOM.