Facebox : lightbox avec JQuery

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' });

 
Gpenverne

Gpenverne

Développeur backend symfonien, qui trouve toujours moyen de faire des machins avec des bidules même si ce n'est pas utile.

Read More