Si vous utilisez l'éditeur Blogger pour ajouter des images à vos billets, vous savez certainement que les images sont publiées sous forme de vignette et que cliquer sur une vignette permet d'ouvrir l'image en taille réelle.

Problème : l'image s'ouvre toute seule dans la page, et votre visiteur doit retourner en arrière (bouton Précédent de son navigateur) pour revenir au billet.

Pourquoi est-ce un problème ?

• Côté utilisabilité, c'est une impasse dont le visiteur ne sort que grâce à son bouton précédent. Une règle de base est de toujours éviter les impasses de navigation.
• Côté esthétique, la page affichant l'image grandeur réelle n'a rien à voir avec le reste du blog

Nous allons améliorer la gestion des liens entre vignettes et images grandeur réelle, grâce à la librairie jQuery et son plugin lightBox, pour afficher plus proprement les imag
es grandeur réelle.
D'abord, les modifications qui suivent nécessitent de disposer d'un hébergement pour y déposer des fichiers.

Vous pouvez pour cela vous servir d'un hébergement existant si vous en possédez un, ou bien utiliser des services gratuits comme Google Sites, les pages perso Free, etc.
Je reviendrais en détail sur ce point dans un prochain billet.

Dans le reste de la manipulation, nous prendons l'hypothèse que vos fichiers sont stockés dans un dossier disponible à l'adresse http://URL/

Télécharger jQuery + lightBox

Rapidement : jQuery est une librairie Javascript facilitant la manipulation dynamique des éléments d'une page web. Son plugin, lightBox, va nous fournir une méthode d'ouverture des images très simple à mettre en œuvre.

Téléchargez l'ensemble sur le site de lightBox. La version actuelle est la 0.5.

Dézipper le fichier téléchargé, puis transférez ensuite les fichiers utiles sur l'hébergement de votre choix. Au final, vous devrez avoir une structure telle que celle-ci :

• http://URL/jquery.lightbox-0.5.css
• http://URL/lightbox-blank.gif
• http://URL/lightbox-btn-close.gif
• http://URL/lightbox-btn-next.gif
• http://URL/lightbox-btn-prev.gif
• http://URL/lightbox-ico-loading.gif
• http://URL/jquery.lightbox-0.5.js
• http://URL/jquery.js

Intégrer les librairies

La préparation étant terminée, passons aux choses sérieuses. Dans le code de votre modèle, juste avant la ligne

ajoutez les lignes suivantes :

Enregistrez.