jQuery FaceBox Plugin

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>

Partager:

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

Poster un Commentaire

Commentaires récents

No comments have been posted so far. Be the first!

De jdmweb à 19:05 29/07/10 { Répondre }