{"id":3824,"date":"2011-02-23T09:25:00","date_gmt":"2011-02-23T08:25:00","guid":{"rendered":"https:\/\/baladesetbricolage.enthoumas.fr\/index.php\/2011\/02\/23\/blogger-ameliorer-laffichage-des-images-avec-lightbox\/"},"modified":"2024-01-10T21:07:25","modified_gmt":"2024-01-10T20:07:25","slug":"blogger-ameliorer-laffichage-des-images-avec-lightbox","status":"publish","type":"post","link":"https:\/\/baladesetbricolage.enthoumas.fr\/index.php\/2011\/02\/23\/blogger-ameliorer-laffichage-des-images-avec-lightbox\/","title":{"rendered":"Blogger : am\u00e9liorer l’affichage des images avec Lightbox"},"content":{"rendered":"
\n
\n

Suite \u00e0 l’article de Jimmy<\/a>, article largement incomplet et qui ne fonctionne pas malheureusement, je me permet donc un post pour avoir une solution compl\u00e8te et fonctionnelle pour int\u00e9grer la LightBox sur Blogger.<\/p>\n

Pour rappel la probl\u00e9matique : sur Blogger lorsqu’on ins\u00e8re une image dans un article, elle s’affiche sous forme de vignette. Et en cliquant dessus, cela affiche l’originale. L’utilisateur qui alors votre blog et donne cliquant sur page pr\u00e9c\u00e9dente pour revenir lire votre blog… Pas tr\u00e8s pratique \ud83d\ude41<\/p>\n

Le but est donc d’am\u00e9liorer l’affichage des images dans votre Blog \u00e0 l’aide de librairie. La plupart des librairie: Lightbox2, fancybox, shadowbox n\u00e9cessite que la personne qui r\u00e9dige l’article aille modifier le code HTML pour ajouter des attribut sur des balises : bref du chinois pour la plupart des personnes qui ne veulent que publier un post sur leur blog.<\/p>\n

\"sans-titre.png\"<\/p>\n

Pour voir l’objectif de cette article, je vous conseil de jeter un coup d\u2019\u0153il sur le blog o\u00f9 j’ai mis cela en place : http:\/\/speleoclubdelaude.blogspot.com\/<\/a>.<\/p>\n

Ce fameux article de Jimmy laisser esp\u00e9rer une solution simple. Malheureusement, sa solution ne marchait pas (entre autre un point virgule mal plac\u00e9). Bref, voil\u00e0 ma solution pour int\u00e9grer la Lightbox sous Blogger.<\/p>\n

Je passe directement au chose s\u00e9rieuse : il faut int\u00e9grer le code suivant dans votre blog. Pour se faire aller dans la partie Pr\u00e9sentation >Modifier le code HTML de votre blog. Je vous conseil d’utiliser pour se faire l’adresse suivante : http:\/\/draft.blogger.com\/<\/p>\n

Ins\u00e9rer le code suivant entre la balise <body><\/span> de votre mod\u00e8le.<\/p>\n

<script src=’http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.2.3\/jquery.min.js’\/><\/span>
\n<script src=’<\/span>http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/js\/<\/span>jquery.lightbox-0.5.js’ type=’text\/javascript’\/><\/span>
\n<link href=’http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/css\/jquery.lightbox-0.5.css’ media=’screen’ rel=’stylesheet’ type=’text\/css’\/><\/span><\/p>\n

<script type=’text\/javascript’><\/span><\/p>\n

$(function() {<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \/\/ Gestion du title\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 $(‘.post-outer’).each(function(i){<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 var aTitre=$(this).find(‘.post-title a’).html();\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 var aImage=$(this).find(‘;a:has(img)’);<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 aImage.attr(‘title’,aTitre);<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 });<\/span><\/p>\n

\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \/\/ Gestion des images picasa!<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 $(‘.post-body a:has(img)’).each(function(i){<\/span>\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 $(this).attr(‘href’,$(this).attr(‘href’).replace(‘-h’,”));<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 });<\/span><\/p>\n

\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \/\/ Pour chaque image, on affecte la lightBx<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 $(‘.post-body a:has(img)’).lightBox({\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 imageLoading: ‘http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/images\/lightbox-ico-loading.gif’;,<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 imageBtnClose: ‘http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/images\/lightbox-btn-close.gif’;,<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 imageBtnPrev: ‘http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/images\/lightbox-btn-prev.gif’;,<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 imageBtnNext: ‘http:\/\/leandrovieira.com\/projects\/jquery\/lightbox\/images\/lightbox-btn-next.gif’;,<\/span>
\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 txtImage: ‘Image’});<\/span>
\n\u00a0\u00a0\u00a0 });<\/span>
\n<\/script><\/span><\/p>\n

Petite explication:<\/strong><\/p>\n