Use jQuery to Add Rel=”Lightbox” to WordPress Galleries

Perhaps at this point WordPress should have some type of support for Lightbox, Thickbox or Shadowbox baked right in – I mean, it’s used natively in the editor, so allowing native WordPress Galleries to automatically take advantage of this seems like it’d be as easy as a setting.

Still, until this is available, here’s a little tutorial on how to get the rel=”lightbox” (or rel=”shadowbox”, class=”thickbox”, whatever your preferred blend.) If you’d like to skip the “How” and get straight to the code, here is the full code for Adding Shadowbox Functionality to WordPress Native Galleries.

1. Download & Properly Install Your Plugin of Choice

While I prefer the look and functionality of Lightbox, in this tutorial I’ll be using Shadowbox as it’s lightweight and a bit more flexible. Properly installed, Shadowbox should leave you with the following code in your header:

<link rel="stylesheet" type="text/css" href="/path/to/shadowbox/shadowbox.css" />
<script type="text/javascript" src="/path/to/shadowbox/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Be sure to change the /path/to/ to wherever the files are located on your site. Since we’re using WordPress, we can also do this, to automatically find the folder your theme is stored in (instead of manually entering the path:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.js">
<script type="text/javascript">
Shadowbox.init();
</script>

This assumes you’ve got the Shadowbox files in a folder structure in your theme such as js/shadowbox.

Once that’s setup correctly, our next task is adding the rel=”shadowbox” to the link tags exported by the native gallery viewer.

Adding the rel=”shadowbox” to the Native WordPress Gallery code

We’ll be using jQuery for this, so you’ll need to have that installed. I use the Google Code hosted version, for many reasons. So to add the call to jQuery, our code becomes this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.js">
<script type="text/javascript">
Shadowbox.init();
</script>

Next we’ll add the jQuery call.

$(document).ready(function(){
$(".gallery a").attr("rel","shadowbox");
});

That code essentially tells jQuery to find all <a> tags in .gallery containing element, and add rel=”shadowbox”. Now you’re all fired up and ready to start displaying images over top your website’s content like the big boys!

The Full Code for Adding rel=”shadowbox” to your Native WordPress Galleries

Open your header.php file up and add this between the <head> tags.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".gallery a").attr("rel","shadowbox");
});
</script>

Up Next: The Power of +1