Fancybox, un plugin jQuery pour faire de superbes lightbox

21 octobre 2010

Fancybox est un plugin jQuery qui permet de générer des lightbox avec du contenu aussi bien statique que dynamique. Considéré comme un « must » dans son domaine, le plugin possède plus d’une trentaine de paramètres pour personnaliser au mieux votre lightbox.

Un plugin complet

Fancybox fait partie des meilleurs plugins de génération de lightbox pour jQuery. Il présente plusieurs caractéristiques. Il permet d’afficher plusieurs types de contenu dans une lightbox (texte, image, AJAX, iframe…) qui est entièrement personnalisable via les paramètres du plugin et une feuille de style.

Il est également possible de regrouper des éléments HTML et ainsi de naviguer entre eux directement via la lightbox. Par exemple, c’est le cas d’une galerie d’images. Comme beaucoup de plugins avec de l’animation, Fancybox utilise les fonctions « easing » de jQuery Easing (plugin optionnel).

Mise en place de Fancybox

Nous allons voir comment placer une lightbox sur une iframe. Commencez par inclure la librairie jQuery, le plugin jQuery Easing et le plugin Fancybox. N’oubliez pas d’inclure également la feuille de style et les images qui accompagnent Fancybox sans quoi votre lightbox ne sera pas générée correctement. Ensuite, déclarez votre lien de la manière suivante :

<a id="iframe" href="http://www.google.com/">Lien vers une iframe</a>

Puis on fait un appel à Fancybox en lui passant plusieurs paramètres, notamment le type iframe et les dimensions de la lightbox :

$(document).ready(function() {
	$("#iframe").fancybox({
		'width'				: '75%',
		'height'			: '75%',
		'autoScale'			: false,
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'type'				: 'iframe'
	});
});

Résultat :

Voilà, cliquez sur votre lien, et votre lightbox s’ouvrira ! Toutes les options sont à découvrir sur le site officilel.

[EDIT] : Fancybox 2 est désormais disponible sous licence payante pour une utilisation commerciale.

Requis : jQuery
Démonstration : http://fancybox.net/
Licence : MIT/GPL

Commentaires