Nitesh is back to blogging.. Apologies for no updates since last 2 months..
TopBottom

Facebook style lightbox - Facebox

Posted by Nitesh Kothari on 05 August 2008
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

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;

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

If you are using this scrip in a menu then, remove <p></p>

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 <p></p> 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...

cheers!!!

10 comments:

Justin Baker said...

It does not work for Cross-Domain requests, which I find as a great shortcoming of it.

Franklin said...

Cool hack :) The rounded corner look of facebox is visually smooth and would look great on my blog... once I get around to uploading it :P Thanks for finding and posting this script!

Joko Blog said...

Hi Nitesh, Ur blog hack is wonderfull, excited for me. I'll use Ur template I hope U permit me to do that, :)

tanpng said...

Hi Nitesh, I love your theme and used it on my own blog, but i am sorry i have removed your credit(please don't mind).

i love your all hacks, i am really looking forward you as an best blogger from India.

BEST VISES FROM ME.....

Tymeless Junque Collection said...

I have this template on my blog, but at the moment, I can't seem to figure out how to get text or anything in the lightbox things, Can you please explain to me how to do this from the Edit HTML area in Blogger? Email at tymelessjunque@gmail.com, I hope to get your help, thanks for this amazing template (currently on my Layout Tester blog

Jared @ Tymeless Junque

ναяυη g said...

Dear Nitesh.I go for only post about things that works.Its amazing man.you did it.it works.100%.ciao junior

www.greenitweb.co.za said...

Does any one knows the solution of Firefox, I am using this Facebox to my Application It works fine on IE but not working on t=other browsers

Post a Comment

Thank you for commenting at NiteshKothari.com. I follow "U comment I comment" movement. All the comment are dofollow. Please do not spam or leave meaningless or short comments. I expect you to leave me meaningful, relative and genuine comments. Thank you.