jQuery, Thickbox, and WordPress

So in this new theme for Open Parenthesis, I really wanted a lightbox / thickbox type effect on local images. This means that when the user clicks on the smaller images used inside blog posts, the “view larger” version is presented in a nice javascript modal dialogue box, with the rest of the page darkened. It’s a common effect you’ve likely seen on many blogs, and there are some plugins which do this, but I wanted it built in to the theme.

I found this post – Create Thickbox in WordPress With Just 3 Lines of Code – which seemed (and was) promising, but had to customize a bit for how I use images – basically to avoid applying the thickbox effect on images which are linked to external sites.

The steps are simple. First, add these three lines to your theme’s header file:

<?php wp_enqueue_style('thickbox'); ?> <!-- inserting style sheet for Thickbox. -->
<?php wp_enqueue_script('jquery'); ?> <!-- including jquery. -->
<?php wp_enqueue_script('thickbox'); ?> <!-- including Thickbox javascript. -->

I suppose one really could also add these to the themes Functions file, but I went for just adding them directly to the header. From this point on, smaller images that are wrapped inside an anchor link (pointing to the full size image) with a class of ‘thickbox’ will automagically be treated with the right behavior.

But who wants to have to add class=’thickbox’ for every image you upload? In the comments thread Remiz pointed out that jQuery can easily do this for you:

$(".post-content a img").parent("a").addClass("thickbox");

(You have to change the “.post-content” bit to match whatever class your posts are wrapped in). The problem is that this selector is too greedy – it adds the class to any image inside a link. I often use images to link directly to third party sites, so the href points not to a larger version of the image but to someone else’s website. In that case thickbox won’t know what to do. I changed the selector to limit it to only images which are linked to something local:

$(".entry a img").parent("a[href*=openparenthesis]").addClass("thickbox");

This says find every image which is inside a link which is inside a div marked with class “entry” (which all my posts are), and then if and only if the href attribute of the enclosing link contains “openparenthesis”, add a class of thickbox to that link. This way when I link an image to an external site (I figure it will be rare to link to an external site that also includes the words openparenthesis) the lightbox effect doesn’t get applied.

Additionally, to add the “gallery” style effect, in which the thickbox treated images include a “X of Y” notation and a link to the previous or next image, you have to add a rel="gallery" or some other string to each anchor link. Again jQuery handles this easily:

$(".entry a img").parent("a[href*=openparenthesis]").attr('rel', 'gallery');

Finally, to make sure jQuery is loaded before your javascript fires, wrap it like this:

jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
$(".entry a img").parent("a[href*=openparenthesis]").addClass("thickbox");
$(".entry a img").parent("a[href*=openparenthesis]").attr('rel','gallery');
});

You can see the effect in this post. The first image (above) and the next image (below) are both smaller sizes linked to a local, larger size. The third and fourth images are linked to jQuery and WordPress sites, and thus don’t get the thickbox effect.