avril
2012
Un article de Nowwis
Fonctionnant avec JQuery également, Fancybox 2 est un plugin tout aussi spendide avec des effets de transitions et autres.
Avec la possibilité d’ajouter des helpers (créations de vignette sur des images liés, ou des créer une barre de navigation), ce plugin réécrit est un vrai délice pour les yeux.
Pour profiter de Fancybox, je vous propose un mini tutoriel.
Les pré-requis :
- Avoir JQuery d’installer.
Les obligatoires :
- jquery.fancybox.pack.js
- jquery.fancybox.css (avec les images correspondantes, vous pouvez tout a fait modifier les chemins de ces dernières.)
Les options :
- jquery.mousewheel-3.0.6.pack.js
-> Ce script va permettre de changer de photo grâce à la molette de la souris, très pratique, avec de belle transition. - jquery.fancybox-buttons.js et jquery.fancybox-buttons.css
-> Ce CSS et ce JS vont permettre d’afficher la barre de navigation pour ne pas trop perturber les utilisateurs qui ne se sentent pas à
l’aise avec le web par exemple - jquery.fancybox-thumbs.js et jquery.fancybox-thumbs.css
-> De même, ce CSS et ce JS vont quant à lui, permettre d’afficher des vignettes pour naviguer plus aisèment dans vos photos.
Une fois vos script et feuille de style appelé, il ne vous reste plus qu’à ajouter quelques attributs sur vos images et vos liens :
<img src="www.mon-site.fr/images/images_petite.jpg" alt="Ma petite image" />
</a>
Une fois vos photos mises dans ce format, il ne vous manque plus que le JQuery :
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Au plaisir, je vous laisse découvrir 
Allez plus loin et utilisé fancybox en profondeur.
Ceci est le minimum est bien sur, nous voulons tous plus !
Alors voici la suite !
Regrouper des images
<img src="www.mon-site.fr/images/images_petite_1.jpg" alt="Ma petite image 1" />
</a>
<a class="fancybox" href="www.mon-site.fr/images/images_grande_2.jpg">
<img src="www.mon-site.fr/images/images_petite_2.jpg" alt="Ma petite image 2" />
</a>
<a class="fancybox" href="www.mon-site.fr/images/images_grande_3.jpg">
<img src="www.mon-site.fr/images/images_petite_3.jpg" alt="Ma petite image 3" />
</a>
On aimerait bien lié les photos entre elle. C’est-à-dire ne pas être obligé de fermer la fenêtre pour ouvrir une autre photo…
C’est ici qu’entre en jeux un attribut HTML.
L’attribut REL sur les liens. Si vous mettez le même attribut, alors toutes les images seront lié.
Dans l’exemple ci dessus :
<img src="www.mon-site.fr/images/images_petite_1.jpg" alt="Ma petite image 1" />
</a>
<a class="fancybox" rel="mon_diapo" href="www.mon-site.fr/images/images_grande_2.jpg">
<img src="www.mon-site.fr/images/images_petite_2.jpg" alt="Ma petite image 2" />
</a>
<a class="fancybox" rel="mon_diapo" href="www.mon-site.fr/images/images_grande_3.jpg">
<img src="www.mon-site.fr/images/images_petite_3.jpg" alt="Ma petite image 3" />
</a>
Rien besoin d’autre, ça se fait tout seul.
Les options du fancybox
openEffect
prevEffect
nextEffect
Voici les différentes options à modifier pour changer les effets.
La liste exaustive dans valeurs possible :
- elastic
- fade
- none
La vitesse peut également être changé pour chacun de ses effets :
closeSpeed
nextSpeed
prevSpeed
Avec les valeurs exprimé en milliseconde, en « slow » ou en « fast ». L’attribut par défaut étant « normal ».
Ceci est un exemple d’une configuration possible :
closeEffect : 'fade',
openEffect : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
openSpeed : ''
});
Afficher un petit descriptif de l'image
C’est également possible avec l’attribut title
helpers : {
title : {
type: 'outside'
}
}
});
Grâce à ceci, vous obtiendrez une joli div en dessous de vos images, manipulable en CSS bien évidemment.
<div class="fancybox-title fancybox-title-outside-wrap">Mon title d'image</div>
Afficher des vignettes lors de la visualisation des grandes images
helpers : {
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
Voici un aperçu de ce que peut donner les vignettes :
Affichage des boutons de navigation
helpers : {
buttons : {}
}
});
Voici l’aperçu de ce que peut donner la barre de navigation
Conclusion
Voici donc une très bonne alternative à JQuery Lightbox, qui permet de faire pas mal de chose également, avec des transitions très sympa.
Avec quelques plugins, on peut lui donner d’autre aspect pour changer un peu la routine des galeries photos.
Couplé avec mousewheel, votre fancybox est gérable avec la molette, un petit atout supplémentaire.
J’espère que ce premier billet de blog vous aura plu. N’hésitez pas à faire quelques remarques sur ce post, et éventuellement proposer des scripts JQuery à visualiser sur mon blog. Je ne manquerais pas de faire un petit descriptif.
Site Officiel :
http://fancyapps.com/fancybox/