Blog (my web musings)

In an effort to make my previous (version 1) CSS-only Modal Gallery more user-friendly, I've now created a version that incorporates simple keyboard navigation from inside the modal overlay, using a small amount of JavaScript.

Version 3: Responsive CSS3 Modal Gallery (+ additional JavaScript keyboard controls):

Demo

This version of the gallery works a little more like how modern image galleries are expected to work (or rather, how users have learned to expect then to work), and the left and right keyboard arrows can be used to progress back and forth throughout the gallery's image enlargements. And the escape key closes the modal overlay.

The "on demand" image loading JavaScript is also included from version 2, along with the same pros and cons, and thoughts and workarounds on dealing with the gallery when JavaScript is disabled, so please read my previous blog post to recap on that.

Key Features

• Opens an image enlargement in a modal overlay / lightbox (by using the :target selector)
• Has "previous" and "next" controls to cycle through the gallery from within the modal overlay / lightbox
• Includes keyboard navigation to move back and forth through the gallery from within the modal overlay / lightbox
• On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
• Uses CSS3 transitions to animate a gentle fade effect (on thumbs and modal overlay / lightbox)
• Includes optional image captions (inside the modal overlay / lightbox)
• Loads larger versions of the images on demand (with a snippet of JavaScript) instead of during initial page load
• Shows a CSS3 loading spinner to indicate that larger images are loading

Compatibility

Modern browsers and IE9+, with alternative markup for IE7/8 to allow those users to view the larger images in a new window. Please view the source of the web page to grab the JS, CSS and HTML markup:

Demo