How to add jQuery Lightbox in WordPress

What is a jQuery lightbox?

While creating forms for a website I felt that a form was taking up a lot of room. Therefore, I decided to look for a plugin to create a pop up. A lightbox jQuery plugin allows you to create a clickable link with a pop up. There are a lot of plugins out there that do similar things but I didn’t want to install a WordPress plugin with a lot of extra features I don’t need.

WordPress built-in jQuery?

You may not have to look further than WordPress itself, there is a handy plugin already defined in WordPress called Thickbox. I will show you how to use both Thickbox and Colorbox in this post. Colorbox is a bit more feature rich, while Thickbox is in my opinion easier to implement.

Let’s start with loading Thickbox

As Thickbox is not loaded automatically, you have to start it in order to use it. Just paste the following in your functions.php file to start it up.

function aj_jquery_thickbox() {
add_thickbox();
}

add_action('wp_enqueue_scripts', 'aj_jquery_thickbox');

Now lets create the content

Here is an example of what we are trying to achieve:

Try out the thickbox and click here!

Don’t worry, its quite simple to achieve. The Thickbox codex page explains extra features that you may wish to include.

Here is the exact code to start up your own lightbox.

<div id="aj-content" style="display:none;">
     <p>
          Surprise, here is the hidden content!
     </p>
</div>

<a href="#TB_inline?width=600&height=550&inlineId=aj-content" class="thickbox">Try out the thickbox and click here!</a>

How to add in Colorbox JS instead?

As mentioned the second option is to add Colorbox.js. Place the JS and CSS file in your current theme’s folder and add the following code to functions.php.

add_action('wp_enqueue_scripts', 'aj_colorboxjs_scripts'); // initiate the function  

function aj_colorboxjs_scripts() {
wp_register_script ( 'colorbox-min' , get_stylesheet_directory_uri() . '/js/jquery.colorbox-min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'colorbox-min' );

// Commented out because you probably want to use the minified version of the script
//wp_register_script ( 'colorbox' , get_stylesheet_directory_uri() . '/js/jquery.colorbox.js', array( 'jquery' ), '1', true );
//wp_enqueue_script( 'colorbox' );

wp_register_style ('colorboxcss', get_stylesheet_directory_uri() . '/css/colorbox.css','', '1', 'all');
wp_enqueue_style( 'colorbox' );
}

Now add the script that will target the CSS and start up the Colorbox plugin. This can also be pasted into your functions.php.

// Add the script to your footer
add_action( 'genesis_after','ajtheme_colorboxjs' );

//Colorbox - a pretty lightbox for content
function ajtheme_colorboxjs() {
	?><script type="text/javascript">
var $s = jQuery.noConflict(); $s(document).ready(function(){
$s(".inline-form").colorbox({inline:true, width:"50%", escKey:true, onOpen: function() {
                $s('#cboxOverlay').height($s(document).height());
        }, overlayClose:true, onLoad: function() {
    $s('#cboxClose').remove();
}});
$s(".callbacks").colorbox({
				onOpen:function(){ alert('onOpen: colorbox is about to open'); },
				onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
				onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
				onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
				onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				//Example of preserving a JavaScript event for inline calls.
				$s("#cboxOverlay").click(function(){
				closeColorBox();
				});
				});
		</script><?php
}

Now add the following html in your theme (page, template or anywhere else)

With the following html we launch the lightbox in our theme. Notice that the above script targets the CSS ‘inline-form’ in our html below. Pretty easy and creative solution right?

<a class="inline-form" href="#inline_content"><p class="button">Launch Colorbox</p></a>

<div style="display:none">
<div id="inline_content" style="background:#fff;">
<p>This is the content that you will see in the lightbox</p>
</div>
</div>

Hope this helps you in your next WordPress project, as always feel free to leave a comment, I might be able to help.