Blog (my web musings)

The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element.

The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small thumb image is clicked, CSS "targets" the matching id of a hidden image and then displays it by changing the CSS state.

Version 1: Responsive CSS3 Modal Gallery (no JavaScript):

Demo

Key Features

A CSS-only, responsive image gallery that;

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

Compatibility

Modern browsers and IE9+, with alternative markup for IE7/8 to allow those users to view the larger images in a new window.

Pros / Cons of the CSS-only version

The main pro for this approach is also its biggest con - all images are download when the page is first loaded, but this is not great for mobile, or performance in general. This prompted me to seek out an alternative solution using JavaScript:

Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images):

Demo

Pros / Cons of the JavaScript version

This second version uses a few lines of JavaScript to load larger images on demand only (when a small thumb image is clicked). Its actually a method which lies at the root of a few responsive image techniques (one that springs to mind is responsive-img.js). Basically, the "src" attribute in an <img> tag is replaced with "data-src" to stop the larger image from loading when the page does. Then, JavaScript switches it back when a link is clicked, which results in the larger image only being downloaded when it is wanted. Yey mobile! Yey front-end performance!

But wait... again, the biggest pro here also has a downside - larger images are inaccessible if JavaScript is turned off. What's even more icky is that because the modal overlay is opened with CSS, it will still display, but there will be no big pic inside. Drat! But this can be countered somewhat and I've included some thoughts on how to workaround this hitch in the actual demo page. When JavaScript is disabled, I've used CSS to stop the empty #gallery .overlay from opening, and disable visual cues on the smaller thumb images (i.e. hover effect, cursor and pointer-events) so that users won't hover over them and see anything to indicate that something interesting could happen. Not sure what pointer-events are? They're something CSS-y that can be used to control how HTML elements respond to mouse / touch events, so I've used them in my JavaScript gallery demo to disable the links to larger images when JS is unavailable.

Unfortunately, pointer-events are unsupported in IE10 and under, so for IE9/10 users who also have JavaScript disabled, they'll rack up void URLs in the browser history if they happen to click on the, now seemingly inactive, thumb images. Yes, its a con but I imagine that IE9/10 user numbers are falling as they'll be upgrading to IE11 now that Microsoft are pushing through auto-updates, and then once they're on IE11, no problem!

IE7/8 however will not be affected at all if JavaScript is off, thanks to the alternative markup (IE conditional comments for hyperlinks that open larger images in a new window). The alternative / extra markup could again be considered a con but its a considerate one, so I don't feel so bad about it.