Facebox : lightbox avec JQuery

ARCHIVE
Une lightbox permet d'afficher un contenu dans une div à l'intérieur de votre site, une sorte de "pop-in", en quelques sortes. Il en existe de nombreuses sur le net, et parmi celles ci j'utilise souvent facebox ( cf. http://defunkt.io/facebox/ ). Cette lightbox utilise Jquery. Vérifiez donc que vous avez bien chargé la libraire jquery au préalable. Voici comment la mettre en place. 1) Téléchargez l'archive facebox 2) Insérez, entre les balises <head> et </head> :
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> <script src="/facebox/facebox.js" type="text/javascript"></script>
3) Ajoutez, entre les balises <body> et </body> : $(document).ready(function($) { $('a[rel*=facebox]').facebox() ; }) Et c'est tout.   Pour appeler votre lightbox facebox, il vous suffira de faire : Pour faire apparaître une div en lightbox :
<a href="#id_du_div" rel="facebox">text</a>
Pour charger un fichier externe (ajax) :
<a href="remote.html" rel="facebox">text</a>
Pour charger une image dans la lightbox :
<a href="images/stairs.jpg" rel="facebox">text</a>
  Vous pouvez également spécifier directement en onclick de votre lien : Du texte, simple :
jQuery.facebox('something cool');
Des fichiers distants :
jQuery.facebox({ ajax: 'remote.html' });
Image
jQuery.facebox({ image: 'images/stairs.jpg' });
Un élément de la page
jQuery.facebox({ div: '#box' });
 
Une question? Une remarque? Un avis? Twittons-en!

When you click on links to various merchants on this site and make a purchase, this can result in this site earning a commission.
Affiliate programs and affiliations include, but are not limited to, the eBay Partner Network and Amazon.