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.
Commentaires
bizarre
Merci pour le retour, mais c'est bizarre car j'avais bien modifié les raccourcis claviers dans le fichier lightbox.js (ligne 403 et suivantes).
Dans la page de commentaires
Non je parlais juste de la page d'explications je n'ai pas utilisé ton fichier js. J'ai juste récupérer les images "prec", "suiv" et "fermerX" et je les ai directement rangé dans le dossier image adéquat. Donc si quelqu'un fait comme moi faut juste penser au raccourci clavier c'est un petit détail qu'on peut facilement oublier.
Besoin d'aide
Bonjour, je trouve super light box.. je suis par contre assez débutante. Je monte ma première page web présentement. Bon, j'ai tout fais comme indiqué mais ca ne fonctionne pas, ca dit que rel="lightbox" n'est pas pris en charge. J'aurais donc besoin d'aide a ce niveau la. Pourriez-vous s'il vous plait me répondre par e-mail.. Merci beaucoup a l'avance !!
Bouton Télécharger
Bonjour à tous !!
Comment faire pour ajouter un bouton ( en bas à gauche par exemple) pour télécharger l'image.
Merci d'avance
Centrage écran
Bonjour,
Sur cette page, http://www.kelonia.org/conferences/index.html l'image s'affiche au milieu de la hauteur totale de la page et non pas au milieu de l'écran. Comme c'est une très longue page, ca me pose un pb. Ya t-il un truc pour corriger celà ? Merci
Centrage complet
Merci pour la réponse. En réduisant le positionnement par rapport au haut de l'écran, on contourne le pb. Comment peut-on obtenir, en modifiant LightBox un centrage complet qui suit l'agrandissement de l'écran comme sur ce site http://wordpress.org/extend/themes/tomorrow. Merci
couleur du texte
Salut à tous !
Je cherche à modifié la couleur des légendes .
Blanc sur blanc c'est pas génial :]
Vous pouvez m'aider svp ?
C'est dans le tuto
#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).
ok
Salut kyungin,
merci pour l'info, en fait mon probleme venait de moi...
J'écrivais color: #000; ce qui n'a aucun effet.
Bref merci lightbox est super clean
Légende
Bonjour,
J'aimerais modifier le texte des légende des photo. C'est le texte "image 1 of 4" par défaut que j'aimerais modifier.
Je peux dire comment le supprimer:
dans le fichier lightbox.js trouver (ligne 336)
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}
et mettre ces lignes en commentaire en ajoutant // au début de chaque ligne.
Pour le modifier, tout dépend de ce que vous voulez faire exactement.
légendes
Merci du conseil.
J'arrive à le supprimer mais j'aimerais mettre le titre de la légende sur deux lignes (ça c'est bon, j'arrive à le faire) et mettre la deuxième ligne en italique avec une police de plus petite taille. Est ce possible ?
taille de l'ombre
Re-bonjour a tous
Peut on modifier la taille de l'ombre de la lightbox. L'ombre de la lightbox ne couvre que la moitié de ma page. Il y a, je pense, un conflit avec la feuille de style CSS de mon site. Quelqu'un peut il m'aider,
merci d'avance
pas de light box sur les autres pages?
Bonjour a tous j'ai un petit souci
une page de mon site affiche tres bien la LB cependant les autres pages non.. se sont bien entendu des pages différentes qui affichent donc des groupes d'images différent.. dois-je installer plusieurs fois la LB sur mon FTP? enfin bref je sais pas trop comment faire
plus de pb pour celui ou celle qui aurait voulu savoir ct juste un pb de denomination de dossier image
../projet1/image/...jpg
../projet2/image/...jpg ça marche pas bien il faut renommer le fichier image
../projet1/image1/...jpg
../projet2/image2/...jpg sinon le script il comprend pô
Est-il envisageable de transférer les boutons "suivant" et "précédent" dans la zone d'information en dessous de l'image et de mettre un simple texte au lieu des images ?
Boutons next/prev et texte
Bonjour, pour reprendre la question de cosmo, je suis en train de chercher à faire à peu près la même chose.
J'essaie de faire afficher un texte au lieu d'une image, et de mon côté j'essaie désespérément de laisser afficher en permanence les boutons "suivant" et "précédent" et de les décaler hors de l'image.
Pour afficher un texte, à moins d'avoir le texte sous forme d'image je vois pas de solution.
Pour le reste (bouton suiv. et préc.) désolé mais ça dépasse mes compétences, j'y connais rien en javascript.
sans titre
Dans mon cas en fait j'ai trouvé hier soir comment décaler les boutons, j'ai agrandi la zone du container. A la ligne 278 j'ai rajouté + 65 dans "var widthNew = (imgWidth + LightboxOptions.borderSize * 2);"
Comme ça ma zone fait 65 px de large de plus que l'image...
Pour afficher le texte, j'utilise effectivement pour l'instant une image, c'est moins clean comme méthode mais au moins ça marche ;)
Cadre noir au chargement
Bonjour,
J'utilise lightbox dans un site fait avec Sherepoint 2003.
J'ai un problème au chargement depuis le passage à la version 2.04 (sous la 2.02 cela fonctionne).
Donc mon problème est qu'après le chargement de la page j'ai un cadre tout noir qui occupe les 3/4 de la page.
De plus en bas de la page je peux voir les images "prev", "next", "close" et celle du chargement.
Je suppose que les "div" ne sont pas cachés à la fin du chargement mais je ne vois pas comment le modifier.
Merci d'avance pour votre aide.
Krizka
Taille des images
Salut à tous,
Déja merci beaucoup pour ce tuto.
J'aimerai savoir si c'est possible de configurer la lightbox pour quelle redimensionne les images/photos toute seule.
par exemple je voudrai que toute mes photos soit en 800*600.
Merci ++
Taille des images
Salut à tous,
Déja merci beaucoup pour ce tuto.
J'aimerai savoir si c'est possible de configurer la lightbox pour quelle redimensionne les images/photos toute seule.
par exemple je voudrai que toute mes photos soit en 800*600.
Merci ++
Je ne pense pas
Pour redimensionner les photos, je ne pense pas que tu puisse le faire avec la lightbox. Tu peux par contre le faire avec un logiciel de retouche d'images comme Photoshop par exemple, images par images...
Si quelqu'un sait comment modifier le texte : changer la police et sa taille et si l'on peut mettre deux police différentes je suis preneur.
Merci
Je ne pense pas
Pour redimensionner les photos, je ne pense pas que tu puisse le faire avec la lightbox. Tu peux par contre le faire avec un logiciel de retouche d'images comme Photoshop par exemple, images par images...
Si quelqu'un sait comment modifier le texte : changer la police et sa taille et si l'on peut mettre deux police différentes je suis preneur.
Merci
Effectivement
Redimensionner les photos j'imagine que c'est possible en javascript mais je vois pas l'intérêt. Il vaut mieux optimiser ses photos avant, histoire de diminuer les temps de chargement. Tu as des logiciels qui le font par lots (plusieurs photos en même temps). Perso j'utilise XnView.
Pour modifier les polices, je me suis pas penché sur la question mais j'imagine qu'en mettant les attributs qui vont bien aux id #imageData #caption et #imageData #numberDisplay ça doit pouvoir se faire.
1 lien, plusieurs photos
Bonjour, cette page est vraiment incroyable, encore merci.
Ma question, je souhaite créer une galerie, chaque image (lien) représente une galerie devant afficher un certain nombre d'images.
Ma question : comment fait-on ?
l'attribut rel="lightbox[magalerie]" j'ai bien compris comment ca marche, mais il faut créer un lien pour chaque, ce qui me chagrine un peu.
C'est possible, je l'ai déjà vu sur certain site mais là je sèche !
Merci d'avance pour ceux qui pourront me donner une réponse !
Bye !
D'abord un grand merci pour le boulot et ...une p'tite question/problème d'affichage sous ie!!!
Des scrolls apparaissent sur Image Data Container , là ou il y a le texte et je ne vois vraiment pas d'où cela vient... Help
Merci d'avance
trouvé!!
Désolé j'ai trouvé et si ça peux être utile à d'autres il faut changer le fichier lightbox.css
et mettre: #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #000000; margin: 0 auto; line-height: 1.4em; overflow: hidden; width: 100% ; }
en fait c'est overflow qui m'embêtai!!!
Pour Rooy, si j'ai bien compris ce que tu voulais cad créer une galerie à laquelle tu accèdes en cliquant sur une photo
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=445046&pid=9997089
Liens vers des weblogs qui référencent ce message :
Merci
Super! Exactement ce que je cherchais pour franciser un lightbox2 sans me casser la tête.
Par contre tu remplaces "next" par "suiv" et le raccourci clavier passe de n à s. Il faut donc le corriger, ce que tu ne fais pas sauf erreur de ma part.
Comme je suis fainéant j'ai fait un Ctrl+F dans mon éditeur de texte sur le fichier lightbox.js, j'ai recherché la chaîne 'n' et je suis ainsi tombé directement à la ligne gérant ce raccourci. Il suffit alors de remplacer 'n' par 's'.
Et encore merci pour ce petit topo simple et précis.
Posté par Manu, 09 décembre 2008 à 15:27