Vous êtes à : Accueil > Nos techniques > Personnaliser Fancybox

Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Utiliser fancyBox

micr0lab utilise la version 2.1.5 de fancybox pour afficher des images, du code HTML ou même des vidéos.

Le site officiel comporte de très bonnes explications et la mise en place est assez simple, nous nous contenterons donc de vous livrer quelques astuces qui ne sont pas documentées à notre connaissance.

Sommaire :Personnaliser le CSSAffiner le HTMLCompresser le javascriptProposer d’autres images

Wouhou !

Lorie ipso doulour sait amer, consetentif sadipscing et litrons, c’est diams nonumérablement torpeur invididus ou laborette et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Bon vous connaissez la suite et la fin j’imagine ?

Non, rien, juste un type.

Par contre, ne mettez pas de lien dans ces cadres ! Notez également que l’aperçu ci-dessous ne fonctionne pas pour le code html.

Le CSS

Depuis la version 2.1.5 de fancybox, le css est très bien conçu et ne nécessite pas vraiment de corrections, juste quelques personnalisations.

Pour personnaliser l’affichage des fenêtres de fancybox, nous vous conseillons notamment de modifier la classe fancybox-skin du fichier jquery.fancybox.css, et de personnaliser quelques couleurs. Tel que compacté en un unique fichier, personnalisé puis compressé par micr0lab, cela donne ce fichier.

Le HTML

Vous pouvez personnaliser le message qui s’affichera lorsque vous cherchez à afficher une ressource qui n’existe pas.

Dans jquery.fancybox.js, cherchez le commentaire « // HTML templates », vous pouvez facilement personnaliser cette partie, notamment les titres du bouton pour fermer et des flêches droite et gauche (lignes 8 à 10 ci-dessous), ainsi que le message renvoyé en cas d’erreur. Voilà par exemple le code employé par micr0lab :

// HTML templates
tpl: {
	wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
	image : '<img class="fancybox-image" src="{href}" alt="" />',
	iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
	error : '<h2>Hm… ressource introuvable, désolé!</h2><img style="align:center; margin : auto" src="http://micr0lab.org/404/404.png" title="Erreur!" alt="Zaaaaaaaaaaap"/><p class="fancybox-error">Le webmestre de micr0lab serait enchanté d’avoir un courriel à ce propos :<br/>webmestre@micr0lab.org</p>',
	closeBtn : '<a title="Fermer" class="fancybox-item fancybox-close" href="javascript:;"></a>',
	next : '<a title="Suivant" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
	prev : '<a title="Pr&eacute;c&eacute;dent" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
	},

Et enfin les images !

Fancybox depuis sa version 2.0 ne fait plus appel qu’à deux fichiers images : fancybox_loading.gif et fancybox_sprite.png

L’image de chargement par défaut de fancybox.L’image des boutons par défaut de fancybox.

micr0lab a modifié ces deux images pour les mettre en harmonie avec les couleurs du site, et cela donne :

L’image de chargement de fancybox personalisée par micr0lab.L’image des boutons de fancybox personalisée par micr0lab.

Vous pouvez librement réutiliser et modifier ces images, vous trouverez plus d’informations sur la page consacrée au droit

Les plus nostalgiques peuvent retrouver ci-dessous le fichier micr0lab_fancybox.png qui était employé dans les versions 1.x de fancybox :

Fichier de personnalisation de fancybox, par micr0lab.

Enfin, la version 2.0.6 telle qu’elle était employée chez micr0lab, avec toutes ces personnalisations et bien plus encore, se télécharge avec ce petit zip.

Compresser le javascript

Les « instructions » telles que données sur le site officiel proposent de charger 9 fichiers (css et js). C’est beaucoup : les compresser en deux fichiers simplifie leur compression et accélère leur chargement en diminuant le nombre de requêtes.

Si on en croit webpagetest, la différence n’est pas minime une fois le javascript compressé :

Un comparatif de chargement : compresser, ça aide.

On passe de 5 requêtes à 1, qui se charge un petit peu plus vite en plus. Ce fichier, compressé, francisé, et un peu commenté, vous pouvez le télécharger.

Une dernière note…

Pour le fun, notez que vous pouvez même afficher la présente page dans une fenêtre, mais c’est à vos risques et périls ! Vous voulez essayer ?

Contact :

Contact Plan Lettre F.a.q. C.G.U.