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!
En plus: album photo: que les vignettes en première page
Commentaires
Bonjour,
Décidément plein de ressources Kyungjin. Ah, si j'avais trouvé cette page plus tôt !!!!
Vraiement bravo et merci ...
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=445046&pid=10019138
Liens vers des weblogs qui référencent ce message :
euh...
Bonsoir,
Je suisure ke le tuto est super bien expliké mais g du mal à comprendre ou mettre koi ? Le js ? le css ? bref et pourtant j'ai lu relu rerelu mais non ! Cela dit félicitations !!!
Posté par caaro_line, 13 novembre 2008 à 21:36