Futurebox, revisited

Earlier this year I unleashed futurebox into the wild. It got a whole lot more attention than I anticipated and I got some great feedback. Since then, I have been slowly working on a new version of futurebox which incorporates many new features.

  • Images are lazy loaded so they are only called when the futurebox overlay is activated.
  • You can scroll through using next/previous buttons
  • Use the keyboard to activate or close futurebox. Overlays can be opened in any order using the keyboard.
  • Generated content for image description and counters
  • CSS transitions for webkit browsers

Update: A new take on futurebox that doesn’t use the target pseudo-class. Futurebox v3.

It’s back with a vengeance

The overall markup hasn’t been altered all that much compared to the original it just adds useful functionality.

The anchor tag is now empty as we load the image as a background. A paragraph tag containing our next and previous links along with a title attribute so we can give the image a small description. The rest of the markup and foundation CSS stays pretty much the same.

Due to the complex nature of this updated version browser support is not a great as the original version. I will run this through a browser screenshot service and confirm browser support. If you come across any weird behaviour please make a comment about it.

Lazy loading images

In the original demo the images were loaded in the page essentially slowing down the load time. I’ve fixed that by using a lazy load technique, rather than having an <img> tag I set a background on the overlay anchor tag. The image is only downloaded when the user clicks on a thumbnail.

.overlay:target > a { background: url(gr_cssninja_lrg.png) 50% 50% no-repeat; }

We use the #futurebox_img2.overlay selector for all other overlays to target each item so we can change the background image correspondingly.

Scroll through images

I have added ability to scroll forwards and backwards through the images using buttons. These form part of the markup in each overlay item essentially just applying the previous images id in the href and the same for the next button.

On each next/previous link we use the rel attribute so we can target it in CSS using attribute selectors

.overlay > p a,
.overlay > p a[rel=next]
	/* styles here */
.overlay > p a[rel=prev]
	/* styles here */

Keyboard navigation

Along with navigation buttons to scroll through the images you can use the keyboard to scroll through in any order. Closing futurebox is also possible using the keyboard. This is done using accesskeys and controls vary in different browsers and platforms.

Using the numbers you can scroll through up to 10 images using the 0-9 numbers and the corresponding keyboard combination in your browser:

  • Firefox Windows: Alt + Shift + 0-9
  • Safari/Chrome Windows: Alt + 0-9
  • Opera Windows: Shift + Esc (This brings up a menu where you press the accesskey you wish to activate)

To close futurebox the access key is x. If you know of any other keyboard combinations, especially the Mac equivalents, I’ll update the article.

CSS generated content

It is now also possible to add a small description below each image using the CSS content property.

.overlay > a + p:after
	content: "No. " counter(futurebox) " " attr(title);

That snippet will get the paragraph tag that is a direct sibling of the anchor tag that is a direct child of the overlay class. Using the :after pseudo-element is how we can append the content after the paragraph.

We also use generated content to do automatic numbering of each image using the counter-reset and counter-increment properties in conjunction with the counter() function used in the content property.

.overlay_container 	{ counter-reset: futurebox; }
.overlay_container > li 	{ counter-increment: futurebox; }

We first reset the counter so we know it will start from 1, we also give it a unique name e.g. futurebox but this can be anything. Then in the following line we increment the counter for each list item inside the overlay_container, we use the child selector to make sure it only counts top level list items. The counter increment idea came from this blog post about doing a css based gallery (it’s in Russian so you’ll need to run it through a translator).

Animation without the JavaScript

One of the most requested features for futurebox was using webkits CSS transitions property to animate scrolling between images. So in this version I have added fading between image overlays. In Chrome and Safari we animate the opacity of the image so it will fade in upon activation.

.overlay a
	opacity: 0;
	-webkit-transition: opacity 1s ease;
.overlay:hover a { opacity: 1; }

To setup the transition we set the opacity to 0 and tell the transition to ease the opacity over 1 second. The reason I activate the transition on :hover and not :target is that target will not transition upon activation, whether this is a bug will take some further investigation.

To stop issues in browsers that don’t support transitions. I wrapped the transition styles in a media query.

@media (-webkit-transition) {
	/* Styles here */

This will only target webkit browsers that support the -webkit-transition property. When Firefox & Opera add support for transitions hopefully they will add support for this media query.

Another issue with transitions is hover will fail to activate if you launch futurebox using the keyboard, moving your mouse will then trigger the transition to execute. Only the initial launch is affected using the keyboard to scroll through other images will trigger the transition correctly.

Some things to note

While this does have good browser support it won’t work in IE and I don’t see it working without considerable use of hacks. There is however a fantastic article over at Carsonified on creating a lighbox effect that works in IE.