23 juillet 2008
Lightbox 2 en français et personnalisation
Etiquettes: images, lightbox, photos
Note: article basé sur la version 2.04
Vous avez sans doute déjà croisé Lightbox JS dans vos balades sur le web.
Il s'agit d'une application en Javascript permettant d'agrandir une image par-dessus la page en cours, avec un effet d'animation.
Si vous ne savez pas encore ce que c'est, rien de tel qu'un petit tour sur le site officiel.
La meilleure façon de se familiariser avec cet outil est de le télécharger, de décompresser l'archive zip et d'ouvrir le fichier index.html avec votre navigateur.
Vous allez avoir cette page. Et là "argh, mon dieu, tout est en anglais!"
J'ai donc pensé à nos amis anglophobe, et fait une version en français, en ajoutant les exemples du site officiel pour les groupes d'images.
Vous pouvez la télécharger ici:
lightbox 2 en français
Dézipper l'archive et ouvrez le fichier index_fr.html avec votre navigateur, vous aurez cette page.
Les autres fichiers sont à ouvrir avec un bloc-note.
Les fichier css/lightbox.css et js/lightbox.js sont commentés afin que vous puissiez repérer quelques possibilités de personnalisation basique.
Je vais les détailler quand même un peu ici. Ceci est juste une sélection d'éléments facilement modifiables et visibles et n'a pas la prétention d'être exhaustif.
Commençons par les images de chargement, de liens suivant, précédent et fermer.
Dans ma version, par défaut vous aurez ça:
Chargement: loading.gif
Précédent: prevlabel.gif
Suivant: nextlabel.gif
Fermer: closelabel.gif
Vous pouvez vous créer vos propres images avec les mêmes noms ou pas, l'essentiel étant de bien les référencer dans le fichier lightbox.css et lightbox.js.
Vous pouvez modifier la taille des images chargement, précédent et suivant sans problème. Par contre, si vous modifier la largeur de l'image "fermer", il y aura une valeur à modifier dans le css.
Le fichier lightbox.css
justement, parlons en de ce css.
Il défini l'apparence de la lightbox.
Prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
ici, on va pouvoir changer la couleur des bordures de la photo.
#imageContainer{ padding: 10px; }
Ici, c'est la largeur de la bordure de la photo. Si on change cette valeur, il faudra également la changer dans le fichier lightbox.js.
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
Ici, ce sont les liens précédent et suivant qui apparaissent sur les côtés de la photo, au survol de la souris.
Il faudra vérifier que l'url de l'image est correct.
En changeant la valeur 15%, on déplace ce lien verticalement. La valeur est prise depuis le haut de l'image, donc plus le % sera élevé, plus le lien apparaîtra vers le bas.
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
Ici, il s'agit de la zone d'information sous l'image (celle qui contient la légende, le numéro de la photo et le bouton "fermer").
On pourra en changer la police (font), la couleur (background-color).
#imageData{ padding:0 10px; color: #666; }
Défini les marges intérieur du cadre d'information, et du même coup la position des textes. Ici on a 0 px en haut et en bas et 10 px à droite et à gauche.
Est définie également la couleur du texte. A noter qu'on peut mettre une couleur différente à la légende et au numéro d'image en ajoutant un attribut color à #imageData #caption (légende) ou à #imageData #numberDisplay (numéro).
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
Il faudra changer la largeur (width) si vous modifiez la largeur de l'image "fermer", les 2 doivent être égales.
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Ici on peut modifier la couleur de l'ombre. La transparence se règle dans le fichier lightbox.js.
Le fichier lightbox.js
De même prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).
Vers le début du fichier:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Ce sont les adresses des images de chargement et du bouton "fermer". Vérifiez l'exactitude de ces adresses.
overlayOpacity: 0.8,
Défini l'opacité du fond qui recouvre la page. 0 = transparent, 1 = opaque
animate: true,
Active l'animation. Je ne vous conseille pas de la désactiver, j'ai constaté des problèmes de mise en page (photo pas au bon endroit). Si vous souhaitez accélérer l'agrandissement de la photo, augmentez plutôt la valeur ci-dessous.
resizeSpeed: 7,
Contrôle la vitesse de l'animation (1= le plus lent et 10= le plus rapide)
borderSize: 10,
Si vous changez le padding dans le CSS, il faut mettre à jour cette variable pour qu'elle soit la même
labelImage: "Image",
labelOf: "sur",
Dans un groupe d'image cela est utilisé pour afficher: Image # sur #.
Changer les labels pour le personnaliser ;)
Vers le milieu du fichier (ligne 231), vous trouverez ceci:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
Cela calcule la marge en haut du cadre de la photo.
En fait, ça récupère la zone d'affichage du navigateur et la divise par le nombre en gras pour définir la marge. Donc, plus ce nombre sera grand, plus la marge sera petite. Si on mettait 2, le haut de la photo apparaîtra à la moitié de la fenêtre.
Maintenant que vous l'avez bien personnalisé, vous êtes prêts à intégrer lightbox dans Canalblog.
