Classy Photo Display Made Easy with Jquery and Thickbox

Though the Web is comprised mostly of text, images make the web interesting. Pictures not only help engage your audience but it also helps break up your content to make it more approachable. No one likes reading one long block of text. :) Today we are looking at adding a Jquery and Thickbox integration which allows users to click on an image and make it larger for better viewing.

Example:

This photo was used with permission via Visual Photo Guide.

How to Use Thickbox:

Once we get Thickbox installed on our site all you have to do is add “class="thickbox"” class to any link and that content will be displayed in the window. The tutorial below will show you how to integrate this into WordPress 2.9+.

How to Use Jquery and Lightbox to Display Images

Today we will be using the Jquery JavaScript library that is built into wordpress. Along with a plugin for Javascript known as Thick Box. Since these are already included with WordPress Core we just need to access them. To do this we will be using the WordPress function known as wp_enqueue_script(). Now this may sound complex but it really isn’t.

Thanks to the astute comments of Nathan Rice and Justin Tadlock this tutorial has been made easier. Make sure to check the update below.

Understanding wp_enqueue_script

Basically what this function does is take a known script and make sure it isn’t called more than once. Since some plugins out there call Jquery, we want to make sure our tweaks don’t cause any errors by calling it twice.

Now wp_enqueue_script has a ton of functionality but we are only looking at using the built in stuff. The built in functionality lets you call most of the common Javascript libraries such as jquery and scriptaculous along with some of their super useful plugins such as Thickbox.

Jquery plugins work just like WordPress plugins. The simply augment the functionality of the framework allowing you to do cool things. They are no more complex than that.

To use wp_enqueue_script() we simply need to know the name of library we want to call and where we want to call it. For example take the following function:

<?php
function jquery_enqueue() {
wp_enqueue_script('jquery');
}
add_action('wp_head', 'jquery_enqueue', 1);
?>

Explanation – In plain English:

• The function named jquery_enqueue() simply calls the jquery library to be displayed using the built in WordPress function wp_enqueue_script().
• The add_action() function simply states where we want the code to be put on the page. In this case we chose wp_head which is located in the page header.

Putting It All Together

Now that we understand how the wp_enqueue_script() function works, lets add in everything we need to get the thickbox plugin integrated and ready to run.

For standard WordPress users this code goes in your functions.php for Thesis Theme users this code goes in your custom_functions.php.

<?php
function thickbox_enqueue() {
	wp_enqueue_script('jquery');
	wp_enqueue_script('thickbox');
        wp_enqueue_style('thickbox');
}
add_action('wp_head', 'thickbox_enqueue', 1);

Explanation: In Plain English

The first function in the code above known as thickbox_enqueue simply calls the jquery library, the thickbox plugin, along with the required CSS and adds it to the header.

Advanced Options

Now everyone loves quick loading pages, so it is good practice to not include extra javascript code on pages where it isn’t needed. For example we here at Art of Blog only use this script for our actual post pages, so we make sure that Jquery and Thickbox are only loaded on the “single.php” pages. This is will help cut down on your page load speeds which will soon be factored into Google’s ranking algorithm. Here is the code we used to implement this tactic. Simply copy and paste this into either your functions.php file or for Thesis users your custom_functions.php file.

function thickbox_enqueue() {
	if (is_single()){
		wp_enqueue_script('jquery');
		wp_enqueue_script('thickbox');
                wp_enqueue_style('thickbox');
	}
}
add_action('wp_head', 'thickbox_enqueue', 1);

Updated: Add Jquery / Thickbox / CSS with One Line of Code:

Thanks to the advice in the comments on this post we can add Thickbox to WordPress by simply adding this code to your functions.php file.

add_thickbox();

Questions / Comments

If you have any questions or comments about this tutorial we would love to hear them. If you think you know a better way, we are open to suggestions as well. ;)