Using the WordPress Lightbox

Since version 2.5 of WordPress, jQuery and its popular lightbox, thickbox, have been included in the WordPress files. Plenty of people are still using plugins to create their lightbox when they don’t need to now (although, of course some may prefer the design or additional control and options that the plugin may bring).

First off you’ll need to include the call to jquery.js in your header as explained in enhance your blog design with jQuery a couple of weeks ago. To recap, we just need to insert the following script call into the header.php theme file:

<?php wp_enqueue_script('jquery'); ?>

Note, you may need to change your source path to reflect the path of your blog if it’s in a directory on your site.

Next off we include the thickbox.js file and the CSS file using the code:

< ?php wp_enqueue_script('thickbox'); ?>
<link rel="stylesheet" href="/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />

Now we have the files needed and just need to create or alter our pages where we want to use Thickbox.

Single Image Lightbox

A lightbox is probably most commonly used to display the large version of an image on a page. Normally you can link a thumbnail to the large version however when a user clicks on the thumbnail the browser will just take them to the image. It’s not pretty and you can’t give it a name or title. By using the lightbox you can do this, however if the user doesn’t have JavaScript enabled then they’ll still see the image via the old method.

So, if you’ve got a single image on your page, perhaps added via the media uploader, and you want to have the thumbnail on the page but link to a larger version for people to see the original image, then usually you would have

<a href="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094.jpg"><img src="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094-150x150.jpg" alt="" title="Liverpool Echo Arena" width="150" height="150" class="alignnone size-thumbnail wp-image-3550" /></a>

We need to amend this slightly to get the link to work with thickbox so first off we add the class of thickbox to the link. Then, to give the image a visible title in the lightbox we also add a title attribute to the link with the image title or brief description in, so now we have:

<a href="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094.jpg" class="thickbox" title="The Liverpool Echo Arena and BT Convention Centre"><img src="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094-150x150.jpg" alt="" title="Liverpool Echo Arena" width="150" height="150" class="alignnone size-thumbnail wp-image-3550" /></a>

At this stage, I’ll just make a point of saying that your image should ideally have an alternative text value which the title attribute value would be suitable for. There are still a few things that WordPress gets wrong unfortunately

The above code will then give you a result as below (you’ll need JavaScript enabled to see the affect!).

Gallery Lightbox

The above code is perfect for a single image. However, if you have a selection of images and want to allow the user to rotate through them without having to open and close each one, then we can use the rel attribute to group the images into a gallery. The value of the rel attribute can be anything, providing it’s the same for each image within the gallery. Personally I’d stick with the value of ‘gallery’ if you can.

So extending the code above and for a mini gallery of photos we can have:

<a href="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094.jpg" class="thickbox" title="The Liverpool Echo Arena and BT Convention Centre" rel="gallery"><img src="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_6094-150x150.jpg" alt="Liverpool Echo Arena" width="150" height="150" class="alignnone size-thumbnail wp-image-3550" /></a>
<a href="http://www.bloggingtips.com/wp-content/uploads/2008/10/albert-dock.jpg" class="thickbox" title="The Albert Dock in Liverpool" rel="gallery"><img src="http://www.bloggingtips.com/wp-content/uploads/2008/10/albert-dock-150x150.jpg" alt="Albert Dock at Night" width="150" height="150" class="alignnone size-thumbnail wp-image-3553" /></a>
<a href="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_2583.jpg" class="thickbox" title="Sunset over the Irish Sea" rel="gallery"><img src="http://www.bloggingtips.com/wp-content/uploads/2008/10/img_2583-150x150.jpg" alt="Sunset" width="150" height="150" class="alignnone size-thumbnail wp-image-3552" /></a>

This will then give you a mini gallery as you can see below. When you click to view the first image you will get next and previous links to allow you to navigate through all of the photos included in the gallery.

Thickbox is great for a simple lightbox to give your images a cleaner, smarter look. There’s also a great deal more that you can do with thickbox and all of this can be done within a post, page or anywhere on your WordPress blog. I highly recommend view all of the examples on the thickbox site

Written by Sarah from Stuff By Sarah
Posted on October 19th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

5