Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Rubriques

23 février 2011 3 23 /02 /février /2011 21:25

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 un 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.

 

sans-titre.png

 

Pour voir l'objectif de cette article, je vous conseil de jeter un coup d'oeil 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. Malheusement, 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 directemnt 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.

 


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

<script type='text/javascript'>

$(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 interessé :-)

 

  • // 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 ascenceur 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 .

 

 

 

 

 

Partager cet article

Repost 0
Published by gourry - dans Geek
commenter cet article

commentaires

Charlotte 13/04/2011 21:02



Re-bonjour,


Pour ne pas vous dérangez inutilement je vous annonce que j'ai finalement trouvé la solution toute seule via un autre
chemin...



gourry 14/04/2011 08:42



Ok pas de soucis. Désolé que mon article n'est pas été assez clair pour vous aider sur ce point. C'est quand pas facile de mettre en place ce simple outils de mise en forme des images...


Belles photos de cheval sur votre blog ;-)


Bonne continuation.



Charlotte 13/04/2011 19:30



Bonjour Edouard,


C'est en lisant le blog de Jimmy que je suis tombée sur le vôtre! Comme votre article est assez récent, je me permet de faire part de mes soucis. Cela fait un bon moment que je cherche, que je
patauge -également en suivant vos conseils- mais non ça ne marche pas : (


Pourtant sur votre blog 'speleoclubdelaude' cela fontionne à merveille (Félicitation pour les très très belles photos en passant!). Ma question est: "Est-ce que pour que cela marche vous avez
vous-même du modifier après ce post certaines choses? Si oui, lesquelles?" J'ai essayé à multiples reprises. J'ai même créé un blog essai avec le même modèle que le votre
(http://exemple03.blogspot.com/). J'espère que vous auriez la gentillesse de répondre ici ou par mail (même si la réponse est négative).


Merci d'avance! Et bonne continuation avec votre superbe club!