I have a simple collection of images with (optional) captions in HTML5. Each image could look like:
<figure> <img src="foobar.png" alt="Alternative text for Foobar"> <figcaption>Caption for Foobar.</figcaption> </figure>
Sometimes some other element than
figure is used; sometimes a list (
ul) is used for all
figure elements; sometimes it’s just
figure without any list.
Features of the gallery
- Show only one image at a time.
- Offer a simple navigation to view the next/previous image and its caption.
- The caption must not be overlaid!
Clicking on an image opens a modal to view it (and its caption) in larger/full size.
- It should be possible to navigate inside of this modal to the next/previous image, too.
- Closing this modal should be possible by two ways: pressing Esc and clicking a link/button.
Offer little preview thumbnails of all images, allowing to directly jump to a particular image by clicking on it.
- Slideshow. Nothing should move automatically.
- Capturing the context menu, or overlaying transparent images. Don’t try to hinder people downloading the images.
The gallery must be accessible, i.e., following WCAG 2.0 guidelines.
- Keyboard users should be able to use every feature of the gallery.
- It should work for users with weak hardware (just to make sure; I don’t expect a gallery to have a noticeable impact on performance anyway).
- It should work on mobile devices, too (i.e., touch instead of click; smaller viewport width).
The script should not require to use specific elements. I want it to use my existing markup (that will be shown when JS is disabled). It should work with
data-* attributes which I add to my markup (
class would be okay, too, but no
id!). Any elements needed for the gallery itself (e.g., the navigation buttons) should be added via JS (so that I don’t have to hide them for users without JS support).
Any CSS should be in a separate CSS file (I want to copy it into my main stylesheet). No inline styles!
Any JS should be in a separate file (e.g., no inline event handlers), which I’d like to link in the
The script should be lightweight. I don’t want any other features, especially not a full library (no jQuery etc.).
It has to be FLOSS (so that LibreJS users can run it).