Responsive Modal Gallery with keyboard nav controls (CSS3/JS)
by, 05-06-2014 at 08:15 AM (14323 Views)
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.
- 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)
- 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: http://fofwebdesign.co.uk/freebies_f...rwd-nav-js.htm