Facebox permet de mettre en place, sur son site, des lightbox basées sur jQuery, dans le même style que celles du célèbre site de réseau social, Facebook.

Sa mise en place et son utilisation sont des plus simples à réaliser.

Le script nécessite l'utilisation de jQuery 1.2.1, au minimum, qu'il convient de déclarer dans sa page avant l'appel des librairies de la lightbox :

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script> 

Puis on initialise le script:

  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox();
    // On peut aussi personnaliser les images
    // de chargement et de fermeture :
      $('a[rel*=facebox]').facebox({
        loading_image : 'facebox/loading.gif',
        close_image   : 'facebox/closelabel.gif'
      });
    })
  </script>

Pour l'appeler, il suffit de déclarer l'attribut rel="facebox" sur les liens désirés:

* Pour voir une image :

<a href="/images/promo/promo450px.jpg" rel="facebox">Voir l'image</a> 

* Pour voir le contenu d'une div cachée :

<a href="#info" rel="facebox">Plus d'infos</a>

<div id="info" style="display:none;">
	<img src="/images/design/pouleDroite.png" style="float:left; margin:6px" /> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
	Sed mattis sagittis pretium.<br />
	Sed enim odio, iaculis quis accumsan non, ullamcorper vitae sem.
</div> 

* Pour voir le résultat d'un appel Ajax:

<a href="ajaxFile.html" rel="facebox">Voir dans le Facebox</a>

Site officiel