background preloader

Fancy jQuery Lightbox

Facebook Twitter

FancyBox avec WordPress sans plugin. Je n'utilise plus fancyBox depuis pas mal de temps car il est très gourmand en mémoire, pourtant il enchante la partie de mon site qui n'est pas sous WordPress et j'en suis ravi (simple, pas trop lourd en terme de script).

fancyBox avec WordPress sans plugin

J'ai donc décidé de l'adapter pour l'intégrer le plus proprement possible dans ce thème WordPress. FancyBox est un outil qui offre une façon agréable et élégante d'ajouter la fonctionnalité de zoom pour les images, le contenu html et multi-média sur vos pages Web. Il est construit sur la base du populaire jQuery et est à la fois facile à mettre en œuvre et un clin d'œil à personnaliser. Vous trouverez ici la dernière version sur le site de l'éditeur et ma version pour WordPress en jquery.fancybox-2.0.zip et jquery.fancybox-2.0.tar.gz. De plus, fancyBox est sous licence Creative Commons Attribution-NonCommercial 3.0. Il est impératif de modifier le chemin des adresses "src=" et l'adapter à votre configuration de site (en noir dans le code) ! FancyBox avec WordPress sans plugin. Plugin jQuery – la meilleure lightbox actuelle : Fancybox. Fancybox, un plugin jQuery pour faire de superbes lightbox. Fancybox est un plugin jQuery qui permet de générer des lightbox avec du contenu aussi bien statique que dynamique.

Fancybox, un plugin jQuery pour faire de superbes lightbox

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. Mise en place de Fancybox Nous allons voir comment placer une lightbox sur une iframe. Puis on fait un appel à Fancybox en lui passant plusieurs paramètres, notamment le type iframe et les dimensions de la lightbox : Résultat : Voilà, cliquez sur votre lien, et votre lightbox s’ouvrira ! Edit fiddle. FancyBox - Fancy jQuery Lightbox Alternative. What's new Version 2 is completely rewritten with new features and updated graphics.

fancyBox - Fancy jQuery Lightbox Alternative

Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (shadows, round corners) Updated plugin options (not compatible with previous versions) Now licensed under Creative Commons Attribution-NonCommercial 3.0 Instructions Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. Attach fancyBox when the document is loaded. <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); });</script> Examples You can also go straight into action and open a standalone version of demo and view its source code.

Helpers.