Using Lightbox

Updated for version 1.3+.

One of the most popular pieces of JavaScript is Lightbox, but it’ll break the Features Gallery if you’re using it on the front page of your blog.

I’ll guide you through three different setups that’ll let you use Slimbox or Thickbox (two good alternatives) or Lightbox (not on the front page).

There are actually quite a few ways to add JavaScript and CSS to your theme, and these are just examples. Also note that you’ll need to change some of the paths to your site and/or files to get these examples to work properly. I’ve tried to lay out everything in an easy-to-understand manner though.

1. Use Slimbox
2. Thickbox
3. Lightbox workaround
4. A note about working with JavaScript

Slimbox

If you’re using the Features Gallery, my suggestion is to use Slimbox, which is much lighter and uses the MooTools framework that we’re using with the Features Gallery.

The first thing you need to do is download the .zip file from the link above (you need to get version 1.53 of the code to work properly).

In your child theme folder such as /themes/shadow, create a file called js. Then, add a folder named css inside of the js folder.

So, your setup should look like this:

/themes
	/shadow
		/js
			/css

Then, you need to drop the file slimbox.js into your /js folder. After that, drop the things from the /css folder into /js/css folder.

In your child theme’s functions.php file, add this:

add_action('op_head', 'slimbox_js');

function slimbox_js() {
	wp_enqueue_script('mootools', get_bloginfo('template_directory') .'/library/js/mootools.js', false, '1.1.1');
	wp_enqueue_script('slimbox', 'http://yoursite.com/wp-content/themes/child-theme/js/slimbox.js', array('mootools'), '2.0');
}

Plus, you need to load the stylesheet too. You can do that with this function.

add_action('wp_head', 'slimbox_css');

function slimbox_css() {
	wp_enqueue_style('slimbox_css', 'http://yoursite.com/wp-content/themes/child-theme/js/css/slimbox.css', false, false, 'screen');
	wp_print_styles(array('slimbox_css'));
}

For more advanced users, you can create conditional statements that only allow the JavaScript to be loaded on certain pages or posts, such as using the is_page() or is_archive() functions. See a full list of conditional tags at the WordPress Codex page.

Using Thickbox

Thickbox is a bit easier since it’s included with WordPress out of the box.

In your child theme’s functions.php file, add this:

add_action('wp_head', 'thickbox_css');
wp_enqueue_script('thickbox');

function thickbox_css() {
	$css = get_bloginfo('wpurl')."/wp-includes/js/thickbox/thickbox.css";
	wp_enqueue_style('thickbox_css', $css, false, false, 'screen');
	wp_print_styles(array('thickbox_css'));
}

Using Lightbox

As mentioned earlier, you can’t use Lightbox and the Features Gallery at the same time. However, you can still use Lightbox on pages that don’t use the Features Gallery.

First, you need to download a copy of Lightbox (this is a link to Lightbox 2, which is the only one I’ve tested with).

Drop the /js and /css folders from the Lightbox download into your child theme directory. Note: You might have to make sure the paths are correct in most of these files, which is mentioned on the Lightbox site.

You need to add this to your child theme’s functions.php file:

add_action('op_head', 'lightbox_js');

function lightbox_js() {
	if(!is_front_page()) :
		wp_enqueue_script('lightbox', 'http://yoursite.com/wp-content/themes/child-theme/js/lightbox.js', array('prototype','scriptaculous-effects','scriptaculous-builder'), '2.0.4');
	endif;
}

Now, you need to add the stylesheet, which has a function also.

add_action('wp_head', 'lightbox_css');

function lightbox_css() {
	wp_enqueue_style('lightbox_css', 'http://yoursite.com/wp-content/themes/child-theme/css/lightbox.css', false, false, 'screen');
	wp_print_styles(array('lightbox_css'));
}

The biggest thing you need to worry about is getting the paths correct. Make sure your paths match up with the place you added the files.

If you’re a more advanced user, you can create conditional statements that only allow the JavaScript to be loaded on certain pages or posts, such as using the is_page() or is_archive() functions. See a full list of conditional tags at the WordPress Codex page.

A final note to remember about working with JavaScript

When using many different JavaScript libraries and scripts, it’s important to remember that not everything will work together. That’s why I suggested the use of Slimbox above. We’re already using MooTools for the Features Gallery, why not lighten the code a bit and use the same for a Lightbox replacement?