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
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
.cssfile 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.
Are you confused?? If yes then leave a comment, i will explain you how to replace image sources.
Now, follow these steps:
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 .
Change the web address in red, if you have uploaded above files on your server or googlepage and Save the Template.
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;
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.
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.
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...