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.
The gallery should be:
- 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.
- Small package size (at the moment
- Available on the npm repository to be able to use it inside your current code. See Accessible Gallery on the npm repository.
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.