My immediate reaction was that I would need to use JavaScript to set some layout and box model properties which I’m always reluctant to do and will only ever do as a last resort. As there was an already perfectly working example, I decided to open up developer tools to see how Google does it (why reinvent the wheel, right?)
Turns out that Google breaks down the structure into two divs, one div contains all of the image cells and the other div is for the expanding area. Once an image is clicked (and expanded), JavaScript inserts a spacer div after the last image cell in the row of the clicked div. JavaScript sets its height to the same as the expanded div, and positions the expanded div absolutely into the position that the spacer div occupies. This is clever, but not ideal due to it’s heavy reliance on JavaScript.
I had a basic idea that I’ve managed to develop into a working demo using CSS for all layout and box model properties. The only JavaScript necessary is to change class names based on the expansion toggle.
The Basic Markup
First of all, we need to construct the .image-grid container along with each .image__cell. Here’s the HTML:
The markup above contains one example .image cell element which will need to be duplicated for each image in the grid. Please note the identifiers for #close-jump-1 and #expand-jump-1, and the subsequent href attributes will need to be unique to the .image__cell. Hash links such as: href="#expand-jump-1" enable the browser to jump to the active image cell when pressed.
But it needs some additional code to work when users ctrl-click to open the links in new tabs.
I have built some things like that, where a bit of JS checks for a hash at page-load, and updates the state if the page to match what the onclick would do.
…but now I wonder if that part couldn’t be implemented in CSS too, these days?
If im not mistaken, Wikipedia uses some useful trick like that for footnotes.
Nice idea @MatsSvensson. As @louislazaris mentioned I’ve been working on an additional demo which uses the :target pseudo selector to do the toggling of the expanded area instead of jQuery. I’ve put together a quick demo with this in action on my personal codepen here. Unfortunately, Codepen won’t allow you to use hash links in the url as it uses iframes. Although not recommended or supported by Codepen, you can open the iframe in a new window by opening one of the image links in a new tab. That’s how I’ve tested that it works anyway.
Cool.
But how is the support among browser for this?
Old crappy IE is becoming less of a problem,
but now more and more people are using old stock-browsers in mobile devices.
As a web-dev, IOS and Android almost makes you nostalgic for IE6 sometimes.
Thanks @djeyewater, the reference in aiming to avoid using JS was in relation to setting the layout properties of the expanding area, not particularly the HTML content. If page weight is an issue then you could use JS to populate HTML within the expanding area asynchronously perhaps, after page load - assuming the images are in a collapsed state.
This is great, thanks for posting this. This was one of two examples of how I could do this that I’ve been able to find. This was the superior example because it doesn’t use a lot of heavy javascript. Thanks!