How To Use WordPress Thickbox To Create A Gallery

WordPress comes with an inbuilt Javascript library which allows you to easily show pop-up dialog boxes on your WordPress site. This Javascript library is called Thickbox, which is a lightweight library used to create dialog widgets built on top of the jQuery library.

The Thickbox library can be used to display an image, multiple images, inline content, iframed content and even content from an iframe. Thickbox Using the Thickbox library you can turn your images on a WordPress post into a pop-up gallery.

How To Use Thickbox

To use Thickbox on your WordPress site you need to include the Javascript and the CSS files into the page. As this is one of the default scripts that is included with WordPress you just simply need to call the handle for Thickbox and it will include the Javascript files on to the page. On the wp_enqueue_scripts action you will need to call the functions wp_enqueue_script with a handle of thickbox and a dependency of jQuery, as this is already registered by WordPress we don't need to provide a source for the script. The next function will need to add the Thickbox styles to the page by using wp_enqueue_style, the Thickbox library is located in the wp-includes folder inside the js folder /wp-includes/js/thickbox.


function include_thickbox_scripts()
{
    // include the javascript
    wp_enqueue_script('thickbox', null, array('jquery'));

    // include the thickbox styles
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
}
add_action('wp_enqueue_scripts', 'include_thickbox_scripts');

Enable Images To Use Thickbox

With the Thickbox styles and Javascript files included on the page we can add images to the post and add the required HTML class to enable Thickbox on the images. To use Thickbox you will need to add a link around the image with a HTML class of Thickbox.


<a href="images/image1.jpg" title="Image 1" class="thickbox"><img src="images/image1_thumbnail.jpg" alt="Image 1" /></a>

This enabled Thickbox on the image, where on the click event of the image the Thickbox dialog box will pop-up with the image in the href displayed in the Thickbox. ## Create A Thickbox Gallery

You can use Thickbox to create a gallery of images allowing you to navigate between multiple images, to create a gallery you simply need to add a rel="" attribute to the link around the image.


<a href="images/image1.jpg" title="Image 1" class="thickbox" rel="gallery"><img src="images/image1_thumbnail.jpg" alt="Image 1" /></a>
<a href="images/image2.jpg" title="Image 2" class="thickbox" rel="gallery"><img src="images/image2_thumbnail.jpg" alt="Image 2" /></a>
<a href="images/image3.jpg" title="Image 3" class="thickbox" rel="gallery"><img src="images/image3_thumbnail.jpg" alt="Image 3" /></a>

Automatically Add Thickbox Class To All Images

If you would like to use Thickbox on every image on your WordPress site that has a link around it then you can use the_content filter to search for images with a link around them and add the class="thickbox" to the image links. This uses a regular expression to find all images with links and replaces the HTML with a link and a HTML class of thickbox.


function auto_add_thickbox($content)
{
    $content = preg_replace('/&lt;a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)&gt;&lt;img/U', '&lt;a$1href="$2.$3" $4 class="thickbox"&gt;&lt;img', $content);

    return $content;
}
add_filter('the_content', 'auto_add_thickbox', 2)

Add Class With jQuery

An alternative to adding the thickbox HTML around all links with the WordPress filter is to use jQuery to find all images on the page, step up to it's parent element which has to be an anchor tag, then we add a class of thickbox.


jQuery(document).ready(function() {
    jQuery("img").parent("a").addClass("thickbox");
});