One of the problems of making a good image display page is the problem that some images come in portrait format, and some come in landscape. There are several ways to set up appropriately formatted thumbnail backgrounds including:

• pick each thumbnail background manually, or
• use only one format so a consistent background can be applied, or
• write some code! (This is what we’ll be doing!)

In this blog entry I’ll use the slide templates from project two into the book ‘More Eric Meyer on CSS’ (by Eric Meyer). You can get the files here. Also, the book is highly recommended.

As you can see, Eric has done a really nice job of creating a great set of formatting that really does look like slides on a lightbox. However, there is a big problem. We need to know beforehand about the shape, portrait or landscape of each slide.

Here’s the (unwrapped) css formatting magic that Eric uses:

body {background: #EED; margin: 1em;}
div#footer {clear: both; padding-top: 3em;
font: 85% Verdana, sans-serif;}
div.pic {float: left; height: 130px; width: 130px;
padding: 15px; margin: 5px 3px;
background: url(frame-ls.gif) center no-repeat;}
div.pt {background-image: url(frame-pt.gif);}
div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}
div.ls img {height: 96px; width: 128px; margin: 16px 0;}
div.pt img {height: 128px; width: 96px; margin: 0 16px;}
div.pic ul {display: none;}

As you can see, we have a div.ls and a div.ps to be used for landscape and portrait images respectively.

This code does great formatting, but has the big problem that you need to set up each thumbnail individually. This is a problem when you are dealing with large numbers of images, or when generating sets of a few random images from a large list of images.

I’m going to take the approach of shimming in some Javascript to looks at the images and pick the appropriate div formatting dynamically as the page loads.

Lets take a look at the required Javascript.

// ::slide_frame()
// Use the correct slide frame for loaded images
// This gets called when the body is loaded.

function slide_frame() {
// Get slide divs in document
slides = document.getElementsByName( “slide” );

// Iterate over all the slides
count = slides.length;
for( i=0 ; i

// Get child img, we need this to handle any whitespace
// in the div.
for( node=0 ; length > node ; ++node ) {
if( slides[i].childNodes[node].className == ‘flh’ ) {
pic = slides[i].childNodes[node];
break;
}
}

// Set offset of image within slide (In this case I hardcoded to the slide size)
w = (160 – pic.width) / 2;
h = (160 – pic.height)/ 2;
pic.style.margin= h + “px ” + w + “px ” + h + “px ” + w + “px “;
pic.style.border=”1px dotted black”;

// Check aspect ratio of thumbnail
if( pic.width > pic.height ) {

// Give it a landscape slide background
slides[i].style.background=”url(‘frame-ls.gif’)”;
}
}
}
The Javascript should be pretty clear as all it does is switch the background property of the slide div.

Now all we need to do is construct some slides to display, and attach the slide_frame() code to the onLoad event of the document body.

Click here for an example of this in action.