jQuery FaceBox Plugin

Comme son nom l'indique, la boîte générée par ce plugin ressemble à celle utilisée sur le fameux site facebook. Bien plus élégant et efficace qu'un alert() javascript, ce plugin peut charger; tout type de contenu dans sa boîte. Très pratique pour toute interaction entre l'utilisateur et le site. Source et © Chris Wanstrath.

Démonstration

Implémentation

Avant de pouvoir utiliser ce plugin, il faut inclure la librairie jquery, le script du plugin et une sa feuille de style.

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

Ensuite, il faut préciser dans le header de la page ou dans fichier .js à part, comment la facebox va se déclencher. Par exemple, il est possible d'utiliser le code suivant, qui spécifie que chaque lien dont l'attribut rel="facebox" aura la cible indiquée par son attribut href ouvert dans une facebox.

Le fait d'utiliser l'attribut rel n'est pas obligatoire, il est tout à fait possible d'utiliser une classe à la place.

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

Au final, il ne reste plus qu'à créer un lien dont l'attribut rel est égal à celui spécifié dans le JavaScript (ici rel='facebox').
Ceci aura pour effet d'afficher le contenu ciblé par l'attribut href dans la facebox.

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

Vous seriez peut être aussi intéressé par::

Commentaires récents

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?

De Luke@ Carp Fishing Reels à 20:24 04/11/10 { Répondre }