Create automatically an image gallery - accessible, responsive, and with automated preload.
Creating an image gallery that is accessible, responsive and with automatic preload has always been a challenge.
Galleries offer a useful method for displaying a selection of high-quality pictures. To make it simpler for visitors to browse photographs on websites, developers use image galleries to display images in a grid-like style.
This time we took a challenge to create an image gallery that is easy to use. You only need only an HTML and our Accessible Gallery package.
Desired features
The gallery should be:
- Accessible:
- The user should be able to navigate over images displayed on overlay using the keyboard.
- The screen reader user should be able to get a notification while image loading progress.
- Focus should be set back when leaving the gallery.
- Responsive UI – adapting to all viewport sizes.
- Preload previous or next image.
- The left/right swipe gesture support. Very useful on mobile devices.
- Support
base64encoded image. - Small package size (at the moment
19 KB). - Available on the npm repository to be able to use it inside your current code. See Accessible Gallery on the npm repository.
- No complex HTML, CSS or JavaScript.
Demo
There is nothing more convenient than an example. See Accessible Gallery in an action.
You may also be interested in reading about 8 tips to speed up image loading
.