Blogger : améliorer l’affichage des images avec Lightbox

Suite à l’article de Jimmy, article largement incomplet et qui ne fonctionne pas malheureusement, je me permet donc un post pour avoir une solution complète et fonctionnelle pour intégrer la LightBox sur Blogger.

Pour rappel la problématique : sur Blogger lorsqu’on insère 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écédente pour revenir lire votre blog… Pas très pratique 🙁

Le but est donc d’améliorer l’affichage des images dans votre Blog à l’aide de librairie. La plupart des librairie: Lightbox2, fancybox, shadowbox nécessite que la personne qui rédige 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.

Pour voir l’objectif de cette article, je vous conseil de jeter un coup d’œil sur le blog où j’ai mis cela en place : http://speleoclubdelaude.blogspot.com/.

Ce fameux article de Jimmy laisser espérer une solution simple. Malheureusement, sa solution ne marchait pas (entre autre un point virgule mal placé). Bref, voilà ma solution pour intégrer la Lightbox sous Blogger.

Je passe directement au chose sérieuse : il faut intégrer le code suivant dans votre blog. Pour se faire aller dans la partie Présentation >Modifier le code HTML de votre blog. Je vous conseil d’utiliser pour se faire l’adresse suivante : http://draft.blogger.com/

Insérer le code suivant entre la balise <body> de votre modèle.

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

        // Gestion des images picasa!
        $(‘.post-body a:has(img)’).each(function(i){            $(this).attr(‘href’,$(this).attr(‘href’).replace(‘-h’, »));
        });

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

Petite explication:

// Gestion du title

Ici, j’ai ajouté un bout de code pour ajouter en dessous de toutes les images dans la Lightbox le titre de l’article.

Pour aller plus loin, on pourrait aussi afficher le libellé de l’image dans la lightbox. Si vous trouvez comment faire cette évolution, je suis intéressé 🙂

// Gestion des images picasa!

Cette section est utile si vous hébergez vos photos sur picasa. En effet pour que cela fonctionne, il faut enlever le -h dans l’url des images. Astuce trouver sur un autre post : http://alaskamassey.blogspot.com/2008/09/lightbox-for-blogger-tutorial.html . Difficile à comprendre pourquoi cela ne fonctionne pas sans…

Après ces deux petites astuces, il ne reste plus qu’à affecter la lighBox sur toutes vos images de vos articles. Et ho joie, cela fonctionne!!! 🙂

C’est à ce moment là, qu’on se rend compte que si l’image d’origine est trop grande, la lightbox ne la redimensionne pas. On est donc embêté par des ascenseur pour regarder les photos… Encore un petit effort vous sera donc encore nécessaire, si vous voulez une solution presque parfaite. La dernière astuce du jour est donc d’ajouter un petit hack à la lightbox. Pour ce faire, je vous conseil, la lecture de l’article suivant: http://jebulle.net/107-plugin-jquery-lightbox-adapter-laffichage-a-la-zone-client.html .