Fancybox : boite d'affichage d'image,video...
Par Laurent | 25.11.09 22:42 | 0 commentaire(s) | programmation
Lorsque l'on programme des pages web, on arrive très vite à l'affichage d'image et/ou de vidéo si on développe par exemple une galerie photos, un blog...et donc on peut se demander comment embellir la présentation des photos,vidéos avec des scripts que l'on ajouterait à ses pages, qui améliorerait facilement l'ensemble.
C'est la librairie Jquery qui est utilisée dans le script qui affiche une boite avec du contenu(image,video,ajax...)
Comment fonctionne Fancybox ?
Une page d'exemples(Examples) vous permettra de voir les différentes fonctionnalités de ce script, et la page (Usage) vous montrera comment intégrer ce script sur vos pages pour, une fois que l'on se trouve sur une image, elle s'ouvre avec ce plugins et donc cet effet.
Une des fonctionnalités intéressante est la navigation par le biais d'une flêche (de gauche à droite ou inversement) sur le cadre ouvert , facilitant ainsi la création d'une liste de photo.De plus vous découvrirez par exemple que la boite se recadre en fonction de la taille de l'image lorsque l'on parcoure la galerie.
Voici un exemple d'intégration avec une photo :
Au préalable vu que ce script utilise Jquery : il faut le télécharger, puis ensuite on peut intégrer le tout après bien sûr avoir aussi téléchargé fancybox.
Intégration : je créé un répertoire exemple dans lequel je place le fichier javascript jquery-1.3.2.min.js puis la photo puis mon fichier exemple.html et le style.css et je mets aussi le répertoire fancybox (pour l'appel des scripts et du style css et des images : bordures,croix,flêches...)
Vous pouvez aussi voir le résultat de ce code : exemple qui va ouvrir une image dans la boite et ainsi lui donner l'effet du script.De nombreuses variantes sont expliquées sur le site (section Usage) et même dans le fichier téléchargé pour la source du script sur le site.
derniers commentaires