26 juillet 2008
Lightbox 2 dans Canalblog
Etiquettes: album, avancé, images, lightbox, photos
Mode: avancé
Voir ici pour télécharger, utiliser et personnaliser Lightbox v2.04 (version francisée).
Je sais qu'il y a déjà des tutos sur Lightbox, notamment chez demolite.
Mais:
- le tuto de Demolite utilise la version originale de Lightbox, en anglais donc.
- elle utilise des fichiers hébergés chez elle ou peut-être même chez quelqu'un d'autre, donc pas de possibilité de personnalisation si vous vous contentez de suivre ce tuto. De plus, si ce quelqu'un supprime un jour son blog ou ces fichiers, a p'us de Lightbox pour vous.
- je vais aller un peu plus loin en parlant de l'application aux albums photo.
Mon but dans mes tutos est qu'autant que possible tout se fasse en autonomie, et que ça laisse le plus de libertés possible. Je vais donc détailler 2 façons d'intégrer Lightbox dans Canalblog:
Avec un hébergement tiers - en hébergeant Lightbox sur Canalblog.
Ensuite, nous verrons comment intégrer lightbox:
Dans un message - dans les albums photo.
Par souci de clarté, je vais utiliser des exemples concrets, avec des adresses réelles (celles que j'ai utilisées). Ces adresses sont évidemment à corriger pour s'adapter à votre cas.
Avec un hébergement tiers
C'est la solution la plus simple à mettre en oeuvre, et la plus souple pour des modification ultérieures.
Il vous faut un hébergement sur lequel vous pouvez créer des dossiers et sous-dossiers, et où vous pouvez avoir les adresses directes des fichiers.
Par exemple, j'ai choisi archive-host, un service gratuit d'hébergement en ligne.
Après avoir télécharger Lightbox 2 (version FR), vous dézippez l'archive. Vous procédez alors aux modifications que vous souhaitez, sur votre ordi, en regardant ce que ça donne grâce au fichier index_fr.html. Gardez de préférence les même noms d'images, ainsi vous n'aurez pas à modifier les adresses dans le fichier lightbox.css.
Une fois que vous avez vos fichiers définitifs, téléchargez-les tous, sauf lightbox.js, sur votre hébergement, en gardant la même structure de dossiers.
On ne met pas le fichier lightbox.js à ce stade, car il faut d'abord modifier les adresses des images de chargement et "fermer". Ne me demandez pas pourquoi ça ne marche pas avec les adresses relatives, je ne sais pas.
Donc, on récupère les adresses absolues des fichiers loading.gif et closelabel.gif et on les mets dans notre fichier lightbox.js là où il faut c'est à dire:
fileLoadingImage: 'http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/images/loading.gif',
fileBottomNavCloseImage: 'http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/images/closelabel.gif',
Maintenant, on peut télécharger le fichier lightbox.js dans le dossier js.
La mise en place sur Canalblog
Comme le dit Manuel, on va ajouter les fichiers javascript dans le header de nos pages.
Entre les balise <head> et </head>
- des pages d'accueil, des archives et d'un message pour utilisation dans les messages
- de la page de présentation d'un album ou d'une photo d'un album selon l'utilisation qu'on voudra dans les albums photo (voir plus loin)
on va mettre ceci (en gras les adresses des fichiers, à changer par les vôtres):
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/prototype.js"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/lightbox.js"></script>
<link rel="stylesheet" href="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/css/lightbox.css" type="text/css" media="screen" />
Note: rien ne vous empêche d'utiliser mes fichiers, et donc les adresses ci-dessus, si vous ne souhaitez pas faire de personnalisation. Cependant, et bien que je n'ai à priori pas de raison de les modifier ou de les supprimer, je ne garantis pas la conservation de ces fichiers.
En hébergeant sur Canalblog
Là c'est un chouilla plus complexe, à cause du renommage des fichiers par Canalblog et de l'impossibilité de créer des dossiers.
De plus, si on souhaite modifier un fichier par la suite, il changera obligatoirement d'adresse.
Donc, faites tout ce qui suit une fois que vous avez bien terminé vos personnalisations.
On va commencer par envoyer les images. Soit on les envoie une par une dans un message, soit on peut utiliser un album photo qu'on ne rendra pas public. Voir ce tuto pour les détails.
Maintenant qu'on a les adresses des images, on va pouvoir les mettre dans les fichiers lightbox.css et lightbox.js.
Dans le css:
#prevLink:hover, #prevLink:visited:hover { background: url(http://storage.canalblog.com/10/32/445046/28007721_m.gif) left 90% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://storage.canalblog.com/60/76/445046/28007716_m.gif) right 90% no-repeat; }
Dans le js:
fileLoadingImage: 'http://storage.canalblog.com/96/77/445046/28007715.gif',
fileBottomNavCloseImage: 'http://storage.canalblog.com/27/96/445046/28007712.gif',
Bien, on va pouvoir envoyer ces 2 fichiers, ainsi que le fichier prototype.js sur Canalblog. Voir ce tuto pour les détails.
Bon, il nous reste maintenant les fichiers scriptaculous.js, effects.js et builder.js.
Je ne sais pas si vous avez remarqué, mais dans les codes à insérer dans le header, le fichier scriptaculous.js appelle le chargement des fichiers effects.js et builder.js. Là:<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
Ca, ça marche si les 3 fichiers sont dans le même dossier.
Hors c'est impossible à faire sur l'hébergement de Canalblog.
Donc, on va pas s'emmerder, on ouvre nos fichiers avec le bloc-note, on copie tout le contenu du fichier effects.js et on le colle à la fin du fichier scriptaculous.js. On fait de même avec le fichier builder.js.
Et là je vous préviens tout de suite, j'y connais que dalle en javascript et je ne sais pas si le fichier obtenu est correct du point de vue langage. Mais en tout cas, ça marche.
Y a plus qu'a héberger notre nouveau fichier scriptaculous.js sur Canalblog.
La mise en place sur Canalblog
On va toujours ajouter les fichiers javascript dans le header de nos pages.
Entre les balise <head> et </head>
- des pages d'accueil, des archives et d'un message pour utilisation dans les messages
-
de la page de présentation d'un album ou d'une photo d'un album selon
l'utilisation qu'on voudra dans les albums photo (voir plus loin)
on va mettre ceci, avec dans l'ordre d'apparition: prototype.js, scriptaculous.js, lightbox.js, lightbox.css (en gras les adresses des fichiers, à changer par les vôtres):
<script type="text/javascript" src="http://storage.canalblog.com/45/34/445046/28110890.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/69/27/445046/28110895.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/00/58/445046/28110882.js"></script>
<link rel="stylesheet" href="http://storage.canalblog.com/82/80/445046/28294521.css" type="text/css" media="screen" />
Note: ici aussi vous pourriez utiliser mes fichiers et donc ces adresses, mais là je vous le déconseille car:
- la présentation a été un peu personnalisée pour coller au design de mon autre blog et ne vous conviendra pas forcément.
- Ces fichiers là sont beaucoup plus susceptibles d'être modifiés, et donc de changer d'adresse.
Intégration dans un message
On va suivre le mode d'emploi, c'est à dire ajouter un attribut rel="lightbox" aux liens.
Donc, on insère notre image, en cochant "créer une miniature..." et "afficher l'image à la taille original..."
On passe en mode html (bouton <>) et on a un code qui ressemble à ça:
<p> <a target="_blank" href="http://storage.canalblog.com/26/99/445046/28296141.jpg"><img width="300" height="206" border="0" src="http://storage.canalblog.com/26/99/445046/28296141_p.jpg" alt="inser_image" /></a></p>
On va le modifier pour activer notre lightbox.
A la place de target="_blank", on va mettre rel="lightbox". On peut ajouter un attribut title pour mettre une légende à la photo. Par exemple, ici, je vais mettre title="insertion de l'image".
Voilà le code modifié:
<p> <a rel="lightbox" title="insertion de l'image" href="http://storage.canalblog.com/26/99/445046/28296141.jpg"><img width="300" height="206" border="0" alt="inser_image" src="http://storage.canalblog.com/26/99/445046/28296141_p.jpg" /></a></p>
Cliquez sur la capture d'écran ci-dessus pour voir ce que ça donne.
Si on veut créer un groupe d'image, comme un album où sur chaque image agrandie on aura un lien suivant et / ou précédent, on ajoute une mention entre crochets à l'attribut rel, qui deviendra par exemple rel="lightbox[groupe 1]" sur toutes les images qu'on veut intégrer au groupe 1.
Intégration dans les albums
Les modifications seront apportées à tous les albums du blog. Il va y avoir 2 façons d'utiliser Lightbox dans les albums photo.
1 - sur la page d'une photo d'un album
Cette méthode est intéressante uniquement si vos photos ont une dimension plus grande que 500px, car cela revient finalement à faire agrandir la photo.
On va donc activer lightbox au niveau de la photo affichée en créant un lien vers la photo à taille originale(*).
On cherche le code suivant:
<img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
Et on y ajoute le lien avec les attributs rel et title.
<a href="<$BlogPhotoURL$>" rel="lightbox" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" /></a>
Démonstration sur les albums de ce blog, comme ici.
(*)En réalité la photo redimensionnée à 800 px maximum pour la plus grande dimension.
2 - sur la page de présentation d'un album
Cette méthode est intéressante dans tous les cas, elle remplace totalement la navigation de Canalblog, mais la fonction diaporama sera toujours opérationnelle.
Le principe: un album constitue un groupe Lightbox. En cliquant sur une vignette de la page de présentation, on obtiendra l'image agrandie aves les liens suivant et / ou précédent.
On va donc trifouiller au niveau du lien de la vignette:
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
On va modifier ce lien pour qui'l pointe non pas vers la page de la photo, mais vers la photo elle-même, et on y ajoute l'attribut rel.
<a href="<$BlogPhotoURL$>" title="<$BlogPhotoTitle$>" rel="lightbox[]"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
On peut se permettre de ne rien mettre entre les crochets après lightbox, car ce code va s'appliquer sur toutes les vignettes de l'album, et il n'y a qu'un album sur la page.
Une page de démonstration ici.
Et voilà, amusez vous bien avec votre Lightbox!
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.
