01Mar

Replacing Flash with Javascript: Metacritic’s slide show with in-image thumbnails

Posted by Elf Sternberg as javascript

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() {
    $('#slides').cycle({
    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:

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

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.

3 Responses to Replacing Flash with Javascript: Metacritic’s slide show with in-image thumbnails

Grego

March 1st, 2010 at 10:19 pm

Terrible. Why would you ruin the composition of those photos by covering up significant portions of the left and bottom? A photo player should not require a special editor to tack on extra space to a photo just so the player controls are visible. The slideshow displays and controls need to be outside the frame, not obscuring the image at any point. This javascript implementation would be pretty slick were that the case.

Elf Sternberg

March 1st, 2010 at 10:28 pm

That particular implementation has already been done a thousand times. The point of this implementation is to show that the thumbnail controls can be embedded in the picture frame, as Metacritic has done. Where to put thumbnails, and whether or not the rhythm of the thumbnail rectangles breaks up or enhances the flow of a graphic design, are particular to any given implementation.

As always, if you don’t like, provide a counter-demonstration. The source code has been provided.

jr

April 27th, 2010 at 8:28 am

+1 elf. Grego, if this isn’t for you then move along, no need for negative criticism that is based solely on your opinion. Thanks to the author for sharing.

Comment Form

Subscribe to Feed

Categories

Calendar

March 2010
M T W T F S S
« Feb   Apr »
1234567
891011121314
15161718192021
22232425262728
293031