Fancybox, un plugin jQuery pour faire de superbes lightbox

21 octobre 2010
20 383 vues

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

  • http://twitter.com/PoP3il Benoit PASQUIER

    Avec l’option du slider intégré pour faire une gallerie d’image, c’est top.

    • http://www.megaptery.com/ Pierrinho

      Oui, la galerie est très pratique !

  • Corentin Redon

    C’est du même style que zoombox

  • Pierrotj22

    Salut,
    où tapes tu le code précisement pour faire un appel à fancybox? N’y a t-il pas une solution avec interface graphique ? Merci par avance

    • http://www.megaptery.com/ Pierrinho

      Tout se passe dans le code : l’appel fancybox se fait soit dans un fichier JS à inclure dans l’entête du fichier HTML, soit directement dans le fichier HTML avec les balises .

  • http://www.chantiersorientaux.com/ mainserv

    La V2 est très sympa niveau effet etc…
    Par contre j’ai l’impression que FancyBox n’est pas compatible avec Tipsy :(

    Quand Tipsy est actif ca enlève la légende sous l’image ouverte par fancybox.

    • http://www.megaptery.com/ Pierre

      Effectivement, la nouvelle version est super sympa ! Merci pour l’info. Quant à ton problème de compatibilité… je ne vois pas d’autre solution que de changer de plugin, notamment basculer sur qTip qui est, pour moi, le meilleur plugin jQuery de génération d’infobulle.

      • http://www.chantiersorientaux.com/ mainserv

        J’ai aussi essayé avec TipTip, même problème…. pas essayé avec qTip mais bon, je me passe allègrement des légendes de fancybox pour le site en question.

  • Mike

    très bon plugin, la dernière version est très bien !