Facebook style lightbox - Facebox

Here comes the latest hack for bloggers - FaceBox!! Generally, people give credit to the original author at the end of the post. But, I would love to thank Dynamic Drive for sharing such a great script developed by FamSpam.com. Facebox is somewhat like facebook-style lightbox. When you click on a link or photo a box pops up(like facebox logo Below). I know you are eager to get the code. So, let me just explain you how to use it for Blogger blogs.

Quoted by Dynamic Drive:

Description: Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Facebox consists of 2 .js files, 1 .css file and some images that make up its interface (such as round corner images). You can use them from my Googlepages or can upload it to your googlepage. If you want to download them, click on the following files, download them and upload to your server or googlepages.

Download these files and upload to your server or googlepages account. After Downloading these files edit Facebox.css as per you blog requirement( If you don't know how to do it, then ask me!!) and replace image sources of images(i.e. b.png, bl.png, br.png, tl.png and tr.png). Now, replace image sources in Facebox.js (i.e. closelabel.gif and loading.gif).

Are you confused?? If yes then leave a comment, i will explain you how to replace image sources.

Now, follow these steps:

Step: 1
Go to Layout section and then open Edit html. Click on Download Full Template to take the backup of your current template(don't miss this, else things may go haywire!!). Now, Check the box to Expand Widget Templates. Insert the following code in the Head Section. I would Suggest you to paste the code just above .

<script src='http://wolvigreybox.googlepages.com/jquery-1.2.2.pack.js' type='text/javascript'/><link href='http://wolvigreybox.googlepages.com/facebox.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://wolvigreybox.googlepages.com/facebox.js'
type='text/javascript'/><script type='text/javascript'>
jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox()
})</script><style type='text/css'>.thickstyle{background:
silver;}</style>

Change the web address in red, if you have uploaded above files on your server or googlepage and Save the Template.

Step:2
Now its the time to explain how and where to use Facebox.

1. Display an image using Facebox: If you want to display images using facebox, use the following code;

<a href="http://www.x.com/image.jpg" rel="facebox"> Wolverine Hacks</a>

If you are using this scrip in a menu then, remove 

2. FaceBox used to display an inline DIV: This is the most useful code. It can be used to display text notes, announcement, disclaimer, contact form and so on... In this case a link is placed on your blog and when you click on that link, the pop up (like facebook) appears.

<p><a
href="#mydiv" rel="facebox">View DIV with id="mydiv" on the
page</a></p><div id="mydiv" style="display:none">This
is the contents of a hidden DIV on the blog, with ID="mydiv" and style
set to "display:none" <br /><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a></div>

3. FaceBox used to display an external page, plus apply a CSS class to the container (to further style it): It is like previous one only, but with more styling is added to the pop up.

<style
type="text/css">.thickstyle{background:
silver;}</style>"<p><a href="external.htm"
rel="facebox[.thickstyle]">View "External.htm" fetched via Ajax,
further styled with ".thickstyle" CSS class</a></p>

If it the pop up does not appear after following these steps.. reload the page twice and check again. Remove and check, it should work.

Note: Set href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your blog only. Do not point it to any external link. It will not Work, if you do so.

so did you like it? Any doubts or questions? Leave a comment, i will surely help you...