Metacritic is an interesting website with a pretty stylish layout, but one thing that drives me nuts is the use of Flash for a simple slideshow on the home page. I decided, as an experiment, to try and replace that with one driven by Javascript.

The choice of javascript turned out to be simple: I'd use jQuery. Not only is it easy to write with, but there's already an incredible plug-in for jQuery called Cycle. Having read through the documentation, the only "tricks" would involve automagically generating the thumbnails, placing them in-line within the slide show, and ensuring they had the right z-index so that they'd be visible.

You can read the description or skip right to the demo. The source code is all there.

The basic premise is that cycler automatically fade between the images, using the standard "fade" setting. So the entirety of the javascript, after importing jQuery and Cycler, is this:

$(document).ready(function() {
    fx: 'fade',
    delay: 4000,
    speed: 200,
    pager: '#slide-thumbnails',
    pagerAnchorBuilder: function(idx, slide) {
        var s = $('img', slide).attr('src');
        return ('<a href="#"><img src="' + s + '" /></a>');

Basically, we're looking for the DOM element 'slides', and all of its immediately children will be treated like slides. We also have a second DOM element 'slide-thumbnails', which I'm filling with a simple anchor containing a copy of the image.

The DOM element 'slides' has individual slides, which look like this:

  <img src="./95.jpg">
    <p>At the annual Pumpkin patch run.</p>

To be fair, I'm assuming every image is the same size. That's relatively important.

The only remaining trick is to wrap slides is another div, 'slide-container', position relative, and both 'slides' and 'slide-thumbnails' are positioned absolutely with respect to 'slider-container.'  'Slide-thumbnail' is made the width of a thumbnail, forcing them into a vertical column.  The z-index of both 'slides' and 'slide-thumbnails' are both set so that the thumbnails are above the slides.

It's simple and elegant.  A little positioning allows the title and text to be placed accordingly, and a nice black background, set to 66% opacity (which you can do with PNG) allows you to place the title and text on the page with a nice delimeter.

Metacritic has in-house artists who make sure the left thumbnail bar doesn't stomp all over the image. You'll have to master some fine Gimp or Photoshop to achieve the same effect.

Check out the demo.  Source code is all there.