Create Popup Images Without a Plugin

Creating a popup effect for an image contained within a post is a cool way to add a little style to your blog. It also negates having your readers view the enlarged image on another page then hitting the back button to return to your post. There are different ways to accomplish this including the use of various plugins. But did you know you don't need a plugin? Let's see it in action. Click the image below to enlarge.

How did I do this? WordPress already comes bundled with Thickbox. It is how theme previews etc are displayed. All we need to do is call Thickbox then add the class "thickbox" to the href tag linking the larger image.

First, add the following to your theme's functions.php file,

function theme_queue_js(){
  if (!is_admin()){
    wp_enqueue_script('jquery');
    add_thickbox();
    wp_enqueue_style('thickbox');
}
}

add_action( 'get_header', 'theme_queue_js' );

Now all you need to do is add class="thickbox" to the href tag linking your larger image. For example, the code for displaying the above image is...

<a href="http://wpcanada.ca/wp-content/uploads/2009/11/glasses.jpg"><img src="http://wpcanada.ca/wp-content/uploads/2009/11/glasses-300x200.jpg" alt="glasses" title="glasses" width="300" height="200" class="aligncenter size-medium wp-image-1899" /></a>

The image displayed is a medium sized image (300x200 px) and is called by the img tag. It is linked to the full sized image as stipulated in the href tag. We add class="thickbox" to the href tag as such...

<a class="thickbox" href="http://wpcanada.ca/wp-content/uploads/2009/11/glasses.jpg"><img src="http://wpcanada.ca/wp-content/uploads/2009/11/glasses-300x200.jpg" alt="glasses" title="glasses" width="300" height="200" class="aligncenter size-medium wp-image-1899" /></a>

If you're looking for something a little fancier you might want to use a plugin but for basic functionality this works fine.