Creating a Facebook Style Lightbox

Facebox is a lightweight Facebook-style lightbox. It's a jQuery-based and can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand, unlike Lightbox v2.0, which uses Prototype. The downside of using Prototype is, if you have two or more scripts that EACH contain either body ONLOAD or window.onload, you'll have a conflict on your hand. We called it - Script Conflict. But with jQuery, it simplifies the amount of code you write for a routine task.

To open an instance of Facebox, all I do is create a hyperlink tag (similar to my previous tutorial on Lightbox). When I click this link, Facebox pops up with an image displayed in the center of the container, nicely and neatly packed inside.

This article is intended as a quick tutorial on using Facebox. It's certainly enough to get you started, and the features presented here may be all you ever need to know about Facebox. Login to your Dashboard> Layout> Edit Html. Copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.

<script src="http://onlinebiztutorials.googlepages.com/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="http://onlinebiztutorials.googlepages.com/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://onlinebiztutorials.googlepages.com/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

Save the template. Then, click Settings> Formatting> Post Template. Add this line into the post template box.
<a href="image.jpg" rel="facebox">link image 1</a>
Example:

Save settings. You'll notice that anything you type into the box of "Post Template" will appear in your new post. Change the color in red to fit your needs. Repeat your previous action in Post Editor should you want to create more hyperlinks.