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
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<body>ajoutez les lignes suivantes :
<script src='http://URL/jquery.js' type='text/javascript'/> <script src='http://URL/jquery.lightbox-0.5.min.js' type='text/javascript'/> <link href='http://URL/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>Enregistrez le modèle.
Appliquer lightBox aux images
Plusieurs solutions existent pour améliorer la gestion des images grandeur réelles dans Blogger, mais la plupart nécessitent d'intervenir dans le code HTML de chaque billet pour ajouter un marqueur spécial à toutes les images que l'on souhaite modifier.La solution que je propose ici s'applique à tous les billets, les nouveaux et ceux déjà publiés. Pas besoin donc d'intervenir dans le codes billets.
Toujours dans le code du modèle, et toujours avant la ligne
<body>
Ajoutez les lignes suivantes :
<script type='text/javascript'>
$(function() {
$('.post-body a:has(img)').lightBox({
imageLoading: 'http://URL/lightbox-ico-loading.gif',
imageBtnClose: 'http://URL/lightbox-btn-close.gif',
imageBtnPrev: 'http://URL/lightbox-btn-prev.gif',
imageBtnNext: 'http://URL/lightbox-btn-next.gif',
txtImage: 'Image',
txtOf: 'sur'
});
});
</script>
Enregistrez.
flux RSS
14 commentaires:
Bonjour,
Merci pour la méthode, mais cela ne fonctionne pas chez moi.
Les apostrophes dans le deuxième code à insérer sont remplacées par leur code html ...
Bonjour
je suis intéressée par l'installation de la lightbox sur blogger, je l'utilise déjà sur mon site ...
malgré avoir suivi toutes tes instructions pour l'installer sur blogger ça ne fonctionne pas non plus chez moi.
j'ai installé tout entre les balises (head).
Merci pour ta réponse.
Et surtout merci pour tes conseils et astuces que tu diffuses ici.
Bonjour à tous les deux,
Pouvez-vous indiquer l'adresse de votre blog ?
Bonjour Jimmy,
je te donne le lien du blog... http://papieretficelles.blogspot.com
mais j'ai ôté le script depuis, que j'avais intégré entres les balises "head"... je le remettrai si tu le souhaites.... mais j'ai le temps je ne suis pas pressée.
je l'utilise déjà sur mon site, http//catherinep.fr
je te souhaite un bon dimanche
Catherine
Bonjour.
Je reviens sur le message d'ahb62300.
Comment fait-on pour que le rel="shadowbox" soit ajouté automatiquement aux images insérées dans un billet ?
Votre méthode ne fonctionne effectivement pas mais je suis très intéressé.
merci d'avance
@Matt, shadowbox semble être une librairie un peu différente de Lightbox. Apparemment, en utilisant l'adapteur jQuery, tu devrais pouvoir éviter de rajouter un à un les "rel=..."
Ce sujet me semble être un bon point de départ.
Bonjour Jimmy et bonjour à tous,
j'ai essayé la méthode qui est proposée dans le ce post mais ca ne fonctionne pas. C'est pas faute d'y aller à tatons, n'étant pas un as du code.
Il y a un autre blog qui propose une solution similaire qui fonctionne sans trop de soucis. Par contre, il vous faudra entrer le paramètre rel="lightbox" pour chaque image que vous souhaitez agrandir via lightbox.
Ici > http://www.blogger-photo.com/2009/09/lightbox-2-installer-dans-blogger.html
Bonjour,
Pourquoi il n'y a aucune réponse à tous ses messages sur Lightbox, moi même je voudrai utiliser lightbox sur mon site sans devoir écrire rel="lightbox à toutes mes photos, mais la méthode de Jimmy semble être foireuse, du moins il faudrait qu'il explique comment heberger
les fichiers de lightbox.
En espérant avoir une reponse, merci
www.etrangemetamorphose.com
Bonjour,
Je relance la discussion car j'ai le meme probleme que tout le monde, ca ne fonctionne pas chez moi non plus ...
Si une solution a été trouvée depuis le temps je suis preneur
merci d'avance
Bonjour,
Retirer le ; à la ligne txtOf: 'sur';
Dommage que Jimmy ne réponde pas beaucoup à toutes ces questions. Car il propose une solution qui semble intéressante, mais sa solution ne fonctionne pas.
J'apporte donc quelques réponse:
- ahb62300 : c'est normal que l'éditeur remplace les apostrophe. Ce n'est pas ca qui explique que le code ne fonctionne pas. Il y a une point virgule en trop dans cet article aprés txtOf: 'sur'.
En plus de cet erreur, il faut régler les problèmes des images qui sous picasa ne s'affiche pas. Bref, cette solution est incomplète.
Pour une solution qui fonctionne bien, je vous conseil la lecture de l'article que j'ai rédigé sur le sujet. Normalement avec cela vous devriez arriver à intégrer la lightbox dans vos blog: http://baladesetbricolage.over-blog.com/article-blogger-ameliorer-l-affichage-des-images-avec-lightbox-67933958.html
Désolé, je suis très pris par le boulot en ce moment, donc aucun moment pour répondre sur ce point.
Tout ce que je peux dire, c'est que j'ai mis en place cette solution en quelques minutes sur un des mes blogs. Pour le blog d'un des lecteurs qui m'a contacté, il a fallu quelques ajustements car le modèle utilisé différait légèrement...
Dès que j'ai un moment, je fais un topo sur cet article.
Bonjour et merci à Edouard,
En effet après avoir ôté le ; en trop ça marche sur mon site. Pour le moment ça me va comme ça.
Au passage, j'ai mis à jour le code, merci à Edouard pour le point virgule en trop.
Enregistrer un commentaire