1. Colorbox

My go-to lightbox script these days. It supports images, image groups, videos, ajax, inline content and iframe content. You can also implement it easily within your WordPress blog using the ‘JQuery Colorbox’ plugin, with multiple styles.

2. fancyBox

fancyBox displays images, html and multimedia content like many of the others, but it stands out for being particularly smooth and stylish. As with colorbox, there’s also a WordPress plugin.

3. LightWindow

I came across LightWindow when I was looking for a script that would work with an image map (see my previous post: Lightboxing With an Image Map). It can handle pretty much any function you could possibly want a lightbox script to perform.

4. Lightbox2

You will have seen Lightbox and Lightbox2 absolutely everywhere. It’s very widely used, although only supports images and sideshows.

5. Boxy

Boxy probably isn’t for you if you’re looking for a fancy image script, but it is certainly perfect for dialog box overlays. It’s designed to look similar to Facebook overlays, with support for dragging and size tweening.

All browsers render elements on a web page differently, which means that when you’re designing and building a website you have to be savvy to the alternate ways the code you produce may be interpreted on a users screen. It is our cross to bear, to some extent, for having free choice rather than a Microsoft monopoly.

That being said, the majority of modern browsers (including Chrome, Opera, Firefox, Internet Explorer and Safari) at least adhere to common web standards, making the job of cross browser testing a necessary but relatively quick and easy task. Internet Explorer 6, however, provides significant headaches. The two biggest limitations that I have come across are:

1. IE6 does not fully nor properly support CSS Version 2. Regularly I have seen layouts which render perfectly in every other browser go completely haywire in IE6.
2. IE6 does not support alpha transparency in PNG images. Instead, you get a horrible grey background colour.

Considering how web browsing and internet use have changed since IE6 was released back in 2001, the news that it’s usage is finally petering out doesn’t come as a shock. The only real surprise is that it clung on so long, although this probably has something to do with the fact it was the default browser shipped with Windows XP. As a result, Microsoft have agreed to continue its support until Windows XP SP3 support is withdrawn in 201, whilst encouraging users to make the leap up to IE9 as soon as possible.

Does this mean we should keep supporting it ourselves in future website designs and upgrades? I would suggest looking at Analytics data to establish how many of your visitors are using IE6 to navigate your website before making any decisions. Some larger sites have already made public decisions, including the withdrawal of IE6 support for Facebook chat, and the withdrawal of IE6 support by YouTube and other Google owned companies, but if you currently still have a significant number of IE6 hits you may want to tread carefully.

Tables in HTML View

If you know some basic HTML you always have the option to flip over to the HTML view and input your table code directly. Here is a simple example:

<table width="400" border="1" cellspacing="0" cellpadding="5">
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

Pasted in, it should look something like this (keep in mind the table you see here is being altered slightly by my stylesheet):

Tables Using a Plugin

As with most problems in WordPress, the table issue can be solved with a simple plugin. There are quite a few options but my favourite is MCE Table Buttons. Once activated it simply adds in another row of buttons so you can control tables in the same way as all your other formatting.

Enabling Featured Image Support

Featured Image support needs to be enabled on a theme by theme basis. To do so, open or create the functions.php file in your theme’s root (wp-content/themes/your-theme-name).

To add thumbnail support for all post types, add this command somewhere after the opening <?php:

add_theme_support('post-thumbnails');

Or, to enable thumbnails for just posts:

add_theme_support('post-thumbnails', array('post'));

Or, just pages:

add_theme_support('post-thumbnails', array('page'));

Setting Sizes

You have two options here – box resizing and hard cropping. Box resizing shrinks an image proportionally (without distorting it), until it fits inside the box you’ve specified. The whole image will show, but to get it to fit in the box it won’t always be the same size. To set your thumbnail using box-resizing, add this command below the line you created to add theme support:

set_post_thumbnail_size( 50, 50 );

Your second option is hard cropping, where the image is cropped to match the target aspect ratio, and is then shrunk to fit in the specified dimensions exactly. You’ll get the exact size you asked for, but parts of your image may have to be cropped out to get the image to fit. To set your thumbnail using hard cropping, add this command below the line you created to add theme support:

set_post_thumbnail_size( 50, 50, true );

Displaying Featured Images in the Theme

Now you can add your Featured Image, if it exists, to the loop:

<?php
if ( has_post_thumbnail() ) {
	// the current post has a thumbnail
} else {
	// the current post lacks a thumbnail
}
?>

You can get around the problems associated with both kinds of sizing by uploading image with the correct aspect ratio.

Creating Multiple Sizes

What if, for example, you want to display a hard cropped square thumbnail on your category pages but a box resized rectangular header image within your individual posts? The answer is simple – just specify additional custom sizes:

add_image_size( 'instance-name', 400, 9999 );

And pull it through into the theme:

<?php the_post_thumbnail( 'instance-name' ); ?>

Congratulations to Jane Roberts, who will be contacted separately. Merry Christmas everyone!