jQuery FaceBox Plugin

This code, as its names implies, creates a widget like the one widely used in the famous website facebook. It's far more efficient and nicer than a JavaScript alert() box. Any content can be loaded inside it, pretty helpful for user interaction as well. Source and © Chris Wanstrath.

Demonstration

How to setup

The first thing you'll have to do is to include the different files: the jQuery library, the plugin script and its style sheet.

/** jQuery Inclusion **/
<script type="text/javascript" src="Path_to/jQuery.js"></script>
/** Plugin Inclusion **/</h3>
<script type="text/javascript" src="Path_to/jquery-facebox.js"></script>
/** Additional Style **/
<link href="Path_to/facebox.css" rel="stylesheet" type="text/css"/>
/** Plugin use **/

Then, you\'ll have to setup the facebox in the header or in a separate js file. The following code specifies that any link that has the rel attribute set to facebox will have the content of its href attribute displayed inside the facebox.

The fact to use the rel attribute is not compulsory, it is possible to use a class instead.

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $("a[rel*=facebox]").facebox();
  });
</script>

Finally, you just have to create a link with a rel attribute set to what you\'ve specified in the js setup (in our case rel='facebox').
Then, whatever you specify in the href attribute will be opened in a facebox.

<a href="someimage.jpg" rel="facebox">text</a>

Why not share this here:

Posted Comments

For some reason all my images have a rel="facebox" attribute even if I don't put this in the code. It is in the page source and the site doesnt validate as a result. Any idea why?

From Luke@ Carp Fishing Reels at 20:24 04/11/10 { Reply }