The jQuery Facebox plugin creates a Facebook like lightbox which can be used to load external pages, images or put in any content you want. It’s not perfect but it works pretty well. This post shows a basic example and the html for a page skeleton which uses Facebox. I’m posting this now because I’ll have some additional posts in the next few days using Facebox (and also some older ones here here and here).
Download Facebox
Download the Facebox plugin and associated files from http://defunkt.io/facebox/ There are a number of examples on that page but here I present a full HTML skeleton for you to start with.
Download jQuery from http://jquery.com/
Working example
Click me to see my logo pop open into a Facebox window. If you are reading this in a feed reader then clicking that link is just going to open the logo in a browser so click through to view this page in a web browser and then click the link.
The example uses a default install of Facebox with the paths changed (see note below) and my fix to make the box auto-center correctly.
The HTML skeleton
The following skeleton is what you need to be able to load content into Facebox boxes:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="/facebox/facebox.css" /> <script language="javascript" src="/js/jquery-1.4.2.min.js"></script> <script language="javascript" src="/facebox/facebox.js"></script> </head> <body> </body> </html>
What you need, as shown above:
- the facebox.css file
- jQuery file (I’ve used 1.4.2 which is the current version at the time this was posted)
- the facebox.js file
And then you obviously need some way to trigger links to load into a Facebox. The recommended way to do this on the Facebox website is to use rel="facebox" and then initialise those links. Adjusting the above skeleton to do this would look like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/facebox/facebox.css" />
<script language="javascript" src="/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="/facebox/facebox.js"></script>
<script language="javascript">
$(document).ready(function() {
$('a[rel*=facebox]').facebox();
})
</script>
</head>
<body>
</body>
</html>
This is a very basic skeleton example and depending on how you set your website up you may want to include the Javascript files into a combined, minified file and the CSS into a common, minified CSS file (this is what I do on my newer sites) and locate the stuff in document.ready to the end of the document. I’ve just set this skeleton up to be pretty basic and the way that most people set their sites up at the present time.
Other ways to initialize
You don’t necessarily have to use the rel="facebox" method.
You might want to initalize a single link using an id:
$(document).ready(function() {
$('#mylink').facebox();
})
Or all links contained in a specific element:
$(document).ready(function() {
$('#somediv a').facebox();
})
Or all links with a particular class:
$(document).ready(function() {
$('a.foo').facebox();
})
An example link
A link that will open into a Facebox window is the same as any other link but it needs rel="facebox" added, or whatever other initalization rule you have in place. Using the default recommendation a link that should open into a Facebox window would look like this:
<a href="something.jpg" rel="facebox">Click me</a>
A note on paths
The default install of Facebox requires it to be located at /facebox otherwise the images won’t show. If you want to locate it somewhere else, you will need to modify the facebox.js and facebox.css files and change all paths to where you want it to be.
Websites I use Facebox on
I use Facebox on Healthy Online when adding a product into the shopping cart, so people can stay of the page listing products without leaving it. When they close the Facebox the other products are still there. It’s also used to show the currency converter and a couple of more info type pages, again so to user doesn’t have to leave the current page.
I also use it on the New Zealand Running Calendar to show running event information from the calendar list pages so again the user does not have to leave the main page when viewing event information.