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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// la structure <a id="iframe" href="http://www.google.com/">Lien vers une iframe</a> //L' appel de Fancybox doit être fait en passant plusieurs paramètres, //notamment les dimensions de la Lightbox et le type iFrame : $(document).ready(function() { $("#iframe").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'type' : 'iframe' }); }); |
Et hop ! Il suffit de cliquer sur le lien pour l’ouverture de la LIghtbox
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)"> <img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg" title="Sicilian Scratches erice (italianoadoravel on/off coming back)"> <img src="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_m.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)"> <img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)"> <img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg" alt="" /> </a> |
Ensuite, l’appel de la galerie par l’intermédiaire de jQuery se fera comme suit:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() { $(".fancybox-thumb").fancybox({ prevEffect : 'none', nextEffect : 'none', helpers : { title : { type: 'outside' }, thumbs : { width : 50, height : 50 } } }); }); |
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/.