Using Lightbox with the Options theme

Updated for version 1.2+. This may be slightly different for version 1.1.

One of the complaints I’ve heard from users is that Lightbox doesn’t work, which is a fairly popular script. The problem with this is that you can’t run Prototype and MooTools together most of the time. Lightbox uses Prototype, and the Features Gallery uses MooTools. Fortunately for you, there are a couple of workarounds to this problem. I’ll go over them here.

Use slimbox instead
Lightbox workaround
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. Then, you need to drop the file /js/slimbox.js into your Options theme /js folder. After that, drop the things from the /css folder into your Options theme /js/css folder.

Now, we need to activate the JavaScript. I’ve built in some functions in the /app/config-advanced.php file for just this type of stuff.

In our advanced config file, we have a couple of different functions we could use. If you want to use Slimbox on every page other than your home page find this code and make it look like this:


/***********************************************************
* op_secondary_javascript - loads extra JavaScript
***********************************************************/
function op_secondary_javascript() {
	$dir = get_bloginfo('template_directory');

	wp_enqueue_script('mootools', $dir .'/js/mootools.js', false, '1.1.1');
	wp_enqueue_script('slimbox', $dir .'/js/slimbox.js', array('mootools'), '2.0');
}

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


/***********************************************************
* op_extra_stylesheets() - loads extra stylesheets.
***********************************************************/
function op_extra_stylesheets() {
	$dir = get_bloginfo('template_directory');
?>
	<link rel='stylesheet' href='<?php echo $dir; ?>/js/css/slimbox.css' type='text/css' media='screen' />
<?php
}

For even 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.

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 folders into your Options theme /js folder. Note: You might have to make sure the paths are correct in most of these files, which is mentioned on the Lightbox site.

If you’re using the Features Gallery or just want to add Lightbox to every page but the home page, you need to do this in your /app/config-advanced.php file.


/***********************************************************
* op_secondary_javascript - loads extra JavaScript
***********************************************************/
function op_secondary_javascript() {
	$dir = get_bloginfo('template_directory');

	if(!is_front_page()) :
		wp_enqueue_script('lightbox', $dir .'/js/js/lightbox.js', array('prototype','scriptaculous-effects','scriptaculous-builder'), '2.0.4');
	endif;
}

If you’re not using the Features Gallery, you can add Lightbox to the home page with this function. Just remove these two lines:


if(!is_front_page()) :
endif;

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


/***********************************************************
* op_extra_stylesheets() - loads extra stylesheets.
***********************************************************/
function op_extra_stylesheets() {
	$dir = get_bloginfo('template_directory');
?>
	<link rel="stylesheet" href="<?php echo $dir; ?>/js/css/lightbox.css" type="text/css" media="screen" />
<?php
}

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.

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?

Comments are closed.

Justin Tadlock