Fancybox : faire un lightbox avec Jquery

Fancybox est un plugin jQuery permettant de créer des Lightbox avec du contenu dynamique et statique.

Établi comme étant l’un des meilleurs dans son domaine, Fancybox dispose de plus d’une trentaine de paramètres pour un maximum de personnalisation.

Fancybox : un plugin complet

Faisant partie des meilleurs pour générer des Lightbox pour jQuery, Fancybox possède différentes caractéristiques comme la possibilité d’afficher de nombreux types de contenus dans une Lightbox : texte, iframe, AJAX, image
Ces derniers sont personnalisables à volonté grâce aux paramètres du plugin ainsi qu’une feuille de style.

Également, la Lightbox générée par le plugin permet le regroupement d’éléments HTML pour une navigation entre eux directement via celle-ci.
Comme par exemple le cas d’une galerie d’images.
Comme de nombreux plugins avec des animations, le plugin Fancybox utilise des fonctions « easing » de jQuery pour le défilement.

La mise en place

Dans cette partie, nous allons voir comment mettre en place une iframe dans le Lightbox ainsi qu’une galerie d’images.

Tout d’abord, il faut inclure bien évidemment la librairie jQuery et le plugin Fancybox.
Il ne faut surtout pas oublier d’inclure les images accompagnant Fancybox ainsi que la feuille de style. Dans le cas où ces derniers sont exclus, la génération de la Lightbox ne se fera pas correctement.

Mettre un iframe dans le lightbox

Et hop ! Il suffit de cliquer sur le lien pour l’ouverture de la LIghtbox

fancybox-iframe

Génération d’une gallerie d’images :

Rien de plus simple, il sera juste ne nécessaire de lister l’ensemble des images en miniatures.
Ensuite, mettre la grande version de l’image dans l’attribut href sans pour autant oublier l’ajout de l’attribut rel identique sur tous les éléments.

Voilà ce qu’il faut faire :

Ensuite, l’appel de la galerie par l’intermédiaire de jQuery se fera comme suit:

gallerie

Sachez qu’il existe d’autres alternatives proposées. Pour les connaître, il suffit de visiter le site officiel du plugin à l’adresse suivante : http://fancyapps.com/fancybox/.

Répondre