3

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 after figure without any list.

I’m looking for a JavaScript gallery which makes viewing/exploring these images a nicer experience.

Features of the gallery

Required:

  • 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!

Optional:

  • 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.

Please not:

  • Slideshow. Nothing should move automatically.
  • Capturing the context menu, or overlaying transparent images. Don’t try to hinder people downloading the images.

Accessibility requirements

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

Technical requirements

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 head.

The script should be lightweight. I don’t want any other features, especially not a full library (no jQuery etc.).

Licensing requirements

It has to be FLOSS (so that LibreJS users can run it).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.