This tutorial will show you how to create a completely custom  jQuery WordPress Lightbox or Colorbox that can include photo groups, custom html, custom html groups and will allow you to use the WordPress loop to make it even cooler.

It will be using the jQuery plugin, “Colorbox”, which you can get and read about here > http://www.jacklmoore.com/colorbox/

Download the jQuery script jquery.colorbox-min.js and put it in your theme’s “js” folder. Also create a “custom.js” and put it in your theme’s “js” folder.

Enqueue the 2 scripts in your themes function file. Example

 // Enqueueing all the java script in a no conflict mode
 function ineedmyjava() {
	if (!is_admin()) {
 
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', true);
		wp_enqueue_script('jquery');
		
		// Custom Theme scripts...
		wp_register_script(
			'custom',
			get_bloginfo('template_directory') . '/js/custom.js',
			array('jquery') );
		wp_enqueue_script('custom');
		
		
		// Lightbox/Colorbox scripts...
		wp_register_script(
			'colorbox',
			get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js',
			array('jquery') );
		wp_enqueue_script('colorbox');
		
		// Add more
		
		
		// between here
		
	}
}
 
add_action('init', 'ineedmyjava');

Link the default colorbox.css file into your theme. You’ll also want to put in the images that come with it in your images folder.

It should all be working now. Here is an example of the simplest form of this plugin. The a class”inline” matches the script in your custom.js file, just like the one you downloaded above.

<p><a class='inline' href="#inline_content">Open me</a></p>

<!-- This contains the hidden content for inline calls -->
		<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff;'>
                <h1>Hello</h1>
                <p>Some Text</p>
			</div>
		</div>

 How to do inside of a WordPress loop.

Your Loop

<?php 
/*
 		You have to set a variable for your 
		divs to open the right hidden div. 
*/
// put the name of the post type title into "divLink"
$divLink = get_the_title();

/* We will throw the variable into the function 
	of sanitize title with dashes to make it friendly
	that will open all the right divs
*/ 
?>

<div class="openme">
	<a href="#<?php echo sanitize_title_with_dashes($divLink); ?>" class="group-name">
</div><!-- open me -->

<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
	<div id='<?php echo sanitize_title_with_dashes($divLink); ?>' style='padding:10px; background:#fff;'>
        <h1><?php the_title(); ?></h1>
        <p><?php the_content(); ?></p>
	</div>
</div><!-- display None -->

End your loop

In this Example, you sanitize your titles to be included in your divs so that the correct link will open the  correct hidden div for the lightbox. Your a class of “group-name” changed from the first example and needs to match the jQuery script in your custom.js file.

That would look like this now:
The inline: true allows for html in the lightbox, the width is the width on your screen the lightbox will open.

$(".group-name").colorbox({
	inline:true, 
        width:"50%"
});

This is important because you could set up multiple groups that will allow you to click next while staying in the lightbox.

Multiple Group Example 

First you would have to add a group to your custom.js file. So it might look like this:

$(".group-one").colorbox({
	inline:true, 
	width:"50%",
	rel:'group-one',
	slideshow:false
});
	
$(".group-two").colorbox({
	inline:true, 
	width:"50%",
	rel:'group-two',
	slideshow:false
});

Then you could set up two loops where you could click through all the things in lightbox in the first loop, close it and click on another item that came from another loop and be able to click through those without mixing the two. So that might look like this:

<?php 
// the query
$args = array(
	'post_type' => 'post',
	'posts_per_page' => 3,
	'category_name' => 'news',
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php 
// put the name of the post type into "divLink"
$divLinkOne = get_the_title();
 
?>

<div class="openme">
	<a href="#<?php echo sanitize_title_with_dashes($divLinkOne); ?>" class="group-one">
    	<?php the_title(); ?>
    </a>
</div><!-- open me -->

<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
	<div id='<?php echo sanitize_title_with_dashes($divLinkOne); ?>' style='padding:10px; background:#fff;'>
        <h1><?php the_title(); ?></h1>
        <p><?php the_content(); ?></p>
	</div>
</div><!-- display None -->

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>



<?php 
/*
		Second Loop and Second Group

*/
// the query
$args = array(
	'post_type' => 'post',
	'posts_per_page' => 3,
	'category_name' => 'events',
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php 
// put the name of the post type into "divLink"
$divLinkTwo = get_the_title();
 
?>

<div class="openme">
	<a href="#<?php echo sanitize_title_with_dashes($divLinkTwo); ?>" class="group-two">
    	<?php the_title(); ?>
    </a>
</div><!-- open me -->

<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
	<div id='<?php echo sanitize_title_with_dashes($divLinkTwo); ?>' style='padding:10px; background:#fff;'>
        <h1><?php the_title(); ?></h1>
        <p><?php the_content(); ?></p>
	</div>
</div><!-- display None -->

<?php endwhile; ?>
<?php endif; ?>