Along with Michael at Valley Web Designs, we are currently developing a Dreamweaver extension for this solution. Please be sure to check back very soon for this!

Photo Gallery

Popup-blocker friendly.
I do not open a new window, the "slideshow"is displayed within the same document.
Browser friendly.
This solution works in most browsers (including IE5 Win and Mac, FF 0.8, NN6, etc.) and should degrade nicely in others.
Image-off friendly.
I am using the DOM with my Image replacement technique to create and then hide text links. This text shows when images are "turned off".
CSS-off friendly.
The slideshow is fully accessible even if the document is unstyled.
Screen-reader friendly.
I am using the DOM to create text links so screen-readers should speak title and description. There is nothing in the slideshow that is not already available to screen-reader users.
Keyboard friendly.
It is possible to use tabbing navigation to navigate through the images from the slideshow.
When the slideshow is closed, focus is set to the appropriate thumbnail (along with a visual clue), allowing users to tab "from there".
In case there is no style support the user does not experience a "page jump".
Web-standards friendly.
I am using unobtrusive DOM scripting to create the slideshow on the fly.
There are no hidden containers (span, div, ...) nor attributes to pollute the HTML markup.
What appears in the "slideshow" is nothing other than the value of these 3 attributes:
  • alt
  • title
  • longdesc
Bandwidth friendly.
Images are not loaded with the document, they are only downloaded at the user's request.
Web Accessibility Guidelines friendly.
Larger images are accessible without DOM support.
Documents linked through the longdesc attribute are more accessible.
User friendly.
  • No popup windows, no page refresh.
  • Larger images should appear in full above the fold.
  • A counter keeps track of the navigation through the gallery.
  • A mouse click on the larger image closes the slideshow.
Web author friendly.
The larger image in the slideshow is not a background image, but an IMG element. So there is no image size constraint and text should not overlap regardless of user settings.

Download easyAlbum.

Important: I recently found out that the SEO Links Extension for Firefox disables the caption below the image.

The show-hide behavior of the Definition List on this page is powered by easyFAQ.

Please use this form to report bugs and errors.