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.

<ul class="overlay_container">
	<li class="overlay" id="futurebox_img2">
		<a href="#close" title="Close future box"></a>
		<p title="Image description goes here">
			<a href="#futurebox_img1" rel="prev" title="Previous">&lt;</a>
			<a href="#futurebox_img3" accesskey="3" rel="next" title="Next">&gt;</a>
		</p>
	</li>
</ul>

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.

<a href="#futurebox_img1" rel="prev" title="Previous">&lt;</a>
<a href="#futurebox_img3" accesskey="3" rel="next" title="Next">&gt;</a>

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.

<a href="#futurebox_img3" accesskey="3" rel="next" title="Next">&gt;</a>

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.

Post filed under: css.

Skip to comment form.

  1. jakov says:

    My FF 3.5.7 has some weird behavior when clicking into the black area: It adds scrollbars to the whole page until I leave the mouse key.

    Nice snippet though!!

  2. @jakov – Thanks for pointing that out it seems to be more noticeable over the web then when I was originally doing it on my localhost. Luckily it’s easily fixed, when the close anchor has focus it adds an outline around the link and since it’s 100% height and width that causes the scrollbars to appear.

    If you add this to the CSS it’ll fix the issue:

    .overlay > a:focus { outline: none; }
  3. sinpet says:

    hey..this is really nice but it isnt working in ie..is there a code that i can add?

  4. @sinpet – No the :target pseudo-class has only recently been added to IE9. You’d need to fallback to a javascript solution using conditional comments for IE8 and down.

  5. jacques says:

    Hello, I like you box because it work very well whitout js.
    But I have a problem..when you have a lot of picture after the firt screen and you are scrolling down in the page for an image, when I click for the full siza picture with futurebox, the picture appear, but the backgroud page return to the top and it’s a problem.
    exemple:
    http://www.meulij.com/futurebox2/index.html
    Have you a trick for this ?
    Thank’s

  6. jacques says:

    I’ve enconter a little metod for the moment:

    #box .overlay {
      width: 100%;
      height: 100%;
      position: relative;
      bottom: 300px;
      display: none;
      z-index: 999;
      background: rgba(0,0,0,0.7);
    }
    

    bottom > height of picture, if not the page scroll down and quit the zone of picture

  7. Ryan Seddon says:

    @jacques –

    Because of the way the :target pseudo-class works with hashes you will get page jumps. I would suggest looking at the 3rd revision of futurebox which uses a different technique that won’t have that problem.

  8. jacques says:

    Hello Ryan,
    Thank’s for this, I’ll be try it soon, because my solution don’t work at 100% and comportment difering with screen size.
    Jacques

  9. jacques says:

    Ryan,
    Impressive the Iframe feature in futureboxV3 !

    I used the V3 now, same problem like V1.
    I’ ve put the “position: relative; bottom: 300px;” another time.
    I’ts not completely bad, only the “ul li:hover { border: 3px solid #FF0000; }” that dont follow the “bottom: 300px;”, visualemente it’s not perfect for this but work.

    You can see the result here:
    http://www.meulij.com/test/dcmod.html

    the ccs is little modified, whitout the iframe part that I don’t use for the moment:

    ————————————————
    #box ul
    {
    padding: 5px 5px 5px 5px;
    float: center;
    }
    #box ul li
    {
    display: inline-block;
    float: center;
    list-style: none;
    margin: 10px 10px 10px 10px;
    border: 3px solid #707070;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    #box ul li:hover { border: 3px solid #FF0000; }
    #box ul li input { display: none; }
    #box ul li input:checked + .overlay { display: table; }
    #box .overlay
    {
    width: 100%;
    height: 100%;
    position: relative;
    /* top: 0; */
    /* left: 0; */
    bottom: 300px; /* l’image agrandis apparait de x pixel au dessus de sa zone de base relative, car sinon on scroll vers le bas*/
    display: none;
    z-index: 999;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
    }
    #box .overlay img,
    #box .overlay iframe
    {
    display: inline;
    border: none;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #FF0000;
    }
    #close { display: none; }
    ———————————————-

    I’ve try, futurebox work whithout problems on:
    safari5, IE9, opera9, chromium21, FF16, icewease10, epiphany2.3

Leave a comment