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 resource shows a example and the html for a page snippet which uses Facebox.
Download Facebox
Download the Facebox plugin and associated files from http://famspam.com/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 JQuery
The HTML snippet
The following snippet is that 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>
What you need, as shown above:
•the facebox.css file
•jQuery file (I've used 1.4.2 )
•the facebox.js file
And then you 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 html snippet 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 structure 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 and locate the stuff in document.ready to the end of the document. I've just set this code snippet 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 href="something.jpg" rel="facebox">Click me</a>
Thank You
