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:
[sourcecode language=”html”]< ?php wp_enqueue_script('thickbox'); ?> [/sourcecode]
Now we have the files needed and just need to create or alter our pages where we want to use Thickbox.
Single Image Lightbox
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
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:
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 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:
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 🙂