jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Facebox

Facebox

mardi 5 février 2008, par gtraxx

Un plugin dans la lignée de thickbox et jquerylightbox , développé par Chris Wanstrath sous le nom de facebox.

Celui-ci permet d’ouvrir vos images, des divs, ou un ensemble de pages distantes.


Le résultat obtenu avec des photos est étonnant et très rapide, sans oublier la manipulation de chaîne de caractères directement dans l’appel de fonction.

Pour utiliser facebox, décompressez l’archive et copiez les fichiers dans votre site web. Ensuite chargez le comme ceci :

<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>

Pour initialiser facebox a tous les attributs rel

jQuery('a[rel*=facebox]').facebox();

On l’utilise comme ceci :

Avec une image :

<a href ="monimage.jpg" rel="facebox"><img src="thumbimage.jpg" /></a>

Pour utiliser du texte provenant d’une div :

<a href="#info" rel="facebox">text</a>

Utilisation avec ajax

<a href="/facebox/remote.html" rel="facebox">text</a>

Utiliser une class de mise en forme

On peux passer une class directement dans facebox en y ajoutant un paramètre.

<a href="/facebox/remote.html" rel="facebox[.bolder]">text</a>

[.bolder] est une class css pour appliquer un font-weight à la chaîne de caractères.

Mais on peux passer n’importe quelle class que ce soit pour une chaîne ou une image.

L’usage de l’envoi d’une chaîne directement fais tout son charme en passant celle-ci dans l’appel de fonction.

jQuery.facebox('Bonjour le monde')

La fonction la plus intéressante est bien entendu l’affichage du résultat d’un callback asynchrone dans une belle fenêtre.

jQuery.facebox(function() {
 jQuery.get('code.js', function(data) {
   jQuery.facebox('<textarea>' + data + '</textarea>')
 })
})

Personnellement, je n’ai pas eu l’occasion de tester les callback asynchrone, mais son auteur fait une excellente démonstration sur son site web (il faut dire je ne suis pas encore a l’aise avec les requêtes asynchrone :p).

Je précise que celui-ci va évoluer afin de nous faire goûter aux joies d’un plugin bien sympathique.

P.-S.

Une version 1.1 est prévue pour ajouter un player qui fera tournez vos albums photos.

Répondre à cet article

4 Messages de forum

  • (logo)

    Facebox

    19 août 2008 02:11, par gtraxx

    Bonjour a tous, je tiens a signaler que j’ai revu et corriger facebox a ma sauce pour les amateurs.
    Je posterai une première version très prochainement avec une doc en français.
    Je l’ai baptisé facebox grey ;-)

    Répondre à ce message

    • (logo)
      Facebox 22 avril 2010 22:44, par gilles

      salut gtraxx
      Qu’en est il de la facebox corrigée que tu devais mettre en ligne "prochainement" ne août 2008 ?

       ;)

      Voir en ligne : question

      Répondre à ce message

  • (logo)

    Facebox

    17 septembre 2008 21:50

    bonjour est ce que on peut mettre un formulaire dedans ? car sa me dit bien

    Répondre à ce message

  • (logo)

    Facebox

    19 novembre 2008 16:33, par bigdule

    bonjour,

    merci pour vos explications, j’ai du mal a saisir comment integrer tout cela dans le code d’une page, comment ou ou mettre en place ce module, je veux dire concrètement. Je suis novice en la matiére, et souhaiterais améliorer graphiquement la façon d’afficher "une popup".

    D’avance merci de vos réponses.

    Répondre à ce message


Derniers commentaires