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.
RSS 2.0
Plan du site
Espace privé