Part Four - Colorboxification

I feel like the last part was fairly lax on subtitles, so let me take this opportunity to subtitle like crazy, yo!

What are we doing tonight, Braines?

In this part, we'll add some Colorbox to our gallery. Colorboxing is a lot like regular boxing, but with colours. Go ahead and download the latest version of colorbox using the colorbox link two sentences ago. I'll give you a minute. While it's downloading, feel free to peruse the Colorbox website to learn you some Colorboxin' syntax and whatnot.

Colorbox extraction

Okay, done? Good. Open that zip file up like a boss and extract these files like so:

Move: /colorbox/jquery.colorbox-min.js
To: /your-template/js/

Move : /example1/colorbox.css
To: /your-template/

Move: /example1/images/
To: /your-template/

Ideally you'd want to merge your colorbox.css file with your style.css and merge the colorbox.js file with a plugins.js file, but that's outside of the scope of this tutorial. If you're comfortable doing so, I definitely recommend it :)

Adding colorbox to your template

Open up your templates header.php and look for the following line:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Create a new line after that and paste this code in:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/colorbox.css" />

Now open up your footer.php and in-between <?php wp_footer(); ?> and </body> add the following line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="<?php bloginfo("template_url"); ?>/js/jquery.colorbox-min.js"></script>
<script>
$(function() {
// Me? Oh I'm just jqueryin'. Ain't no thang.
});
</script>
 

The first line there includes jQuery. Some would say jQuery is fairly essential to actually using jQuery. Personally I would agree. The second line there includes the .js file we downloaded and extracted earlier. Lines 3-7 creates a the standard "I'm firin' my jqueries" function that waits for the page to load before executing your code. All the code you create goes inside this function, where that comment is.

Writing some jQuery

See that snappy comment in there? Delete that. Or leave it in if you like. You know. Whatever.

Inside that function write in the following code. Or just paste it in if you're not feeling up to some manual typing.

$(".thumbnail-container a").colorbox({
opacity: 0.92,
scalePhotos: true,
maxHeight: "90%",
maxWidth: "90%"
});

So now the whole code inside the script tag should look like this:

 
$(function() {
$(".thumbnail-container a").colorbox({
opacity: 0.92,
scalePhotos: true,
maxHeight: "90%",
maxWidth: "90%"
});
});

Try it out! Did it work? Ooh yeah.

Colorboxed

Now that's looking good!

That was easy wasn't it? Let's try something a little harder. Let's create a custom homepage with a slider feature that shows your latest images! Hit the links below, you monster.

I think I said colorbox so much in that post I now have no comprehension of the word.