Lightbox est un outil permettant d'ouvrir des images par dessus la page en cours ce qui permet aux visiteurs de ne pas sortir du blog.
De plus, je trouve cet outil classe, son fond sombre permet de mieux mettre en évidence les images et surtout il permet de voir un ensemble d'images avec "suivant" et "précédent" car mes posts servant plus ou moins de galleries sont assez longs. On peut aussi gérer la transparence de la fenêtre.
1 - Télécharger Lightbox2 :
Plus d'infos ici (en anglais) ou ici (en français)
2 - Créez un google site :
Voilà déjà une nouveauté pour moi : Enregistrer des scripts javascript dans un hébergeur !
En fait si vous avez un blogspot vous avez donc un compte Google utilisez le pour créer un site afin d'uploader (enregistrer) les scripts sur la toile.
Créez un site google site, en allant sur la page d'acceuil google > plus > Sites
Choisissez un nom facile, sinon une fois connecté dans google comptes vous pouvez y acceder facilement dans la rubrique Mes produits>Sites où il figurera.Choisissez un model de site,
Créez une page (croix verte en haut à droite) de type "classeur" dans mon cas cette page s'apelle "blogscripts", allez dans la page et copiez l'adresse (ceci est votre URL à mettre dans vos scripts)
Pour des raisons de clarté j'ai créé des dossiers dans cette page mais il ne sont pas à mettre dans l'URL.
3 - Modifier vos scripts :
Décompressez votre fichier Lightbox*.zip téléchargé
Ouvrez lightbox.js (dans dossier js) avec bloc note
Complèter l'adresse de 2 images dans le script
(*URL* est à remplacer par le chemin de votre hébergement) :
var loadingImage = '*URL*/loading.gif';
var closeButton = '*URL*/close.gif';
Enregistrer le fichier.
Ouvrez lightbox.css (dans dossier css) avec bloc note : ceci est la feuille de style qui va gérer l'apparence de la fenêtre où vos images s'afficheront
#prevLink:hover, #prevLink:visited:hover { background: url(*URL*/prevlabel.gif) left 15% no-repeat; text-decoration: none; }
#nextLink:hover, #nextLink:visited:hover { background: url(*URL*/nextlabel.gif) right 15% no-repeat; text-decoration: none; }
Enregistrer le fichier.
4 - Charger les éléments dans votre site google :
Allez dans la page classeur que vous avez créée et faites "Ajouter un fichier" (malheureusement uniquement un à la fois)
Faites ceci pour toutes les fichiers .js, pour lightbox.css et les images loading,overlay,closelabel, prevlabel et nextlabel.
VOILA !! ... un bon truc de fait ... mais c'est pas tout a fait fini alors encore un petit effort
5 - Modifier le template du blog pour qu'il utilise lightbox :
Un conseil, faites une copie de votre blog avant au cas ou en plus c'est toujours mieux d'en avoir une et c'est très léger (le mien ne fait que 136 ko).
Téléchargez Blogger Back Up
http://mondemo.blogspot.com/2008/01/tout-savoir-sur-blogger-backup.html
Bien, dans votre blog faites une copie de votre template actuel au cas où car le backup fait avec blogger backup ne concerne que le contenu du blog.
Pour cela, dans votre blog allez sur Présentation (en haut à droite) puis sur l'onglet Modifier le code HTML. Cliquer sur "Télécharger le modèle dans son intégralité".
Maintenant, dans Modifier le modèle collez ces 4 lignes entre
]]></b:skin>
COLLER LES 4 LIGNES ICI !!!
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
VOICI LES 4 LIGNES A COPIER :
<script type="text/javascript" src="*URL*/prototype.js"></script>
<script type="text/javascript" src="*URL*/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="*URL*/lightbox.js"></script>
<link rel="stylesheet" href="*URL*/lightbox.css" type="text/css" media="screen">
Enregistrez le modèle.
6 - Utiliser enfin le lightbox dans vos posts :
Créez un post à votre façon, pour ma part j'ai téléchargé picasa sur mon pc mais ce n'est pas obligatoire.
Une fois le post publié, ou pendant la publication du post lorsque vous serez à l'aise avec l'HTML, allez sur Présentation (en haut à droite) puis Publication d'un message et enfin sur l'onglet modifier les messages. Choisissez un message contenant des images et cliquez sur Modifier.
Onglet Modifier le code HTML, coller rel="lightbox" à la fin de href="#########" comme ceci
<a href="http://www.blogger.com/images/image-1.jpg" rel="lightbox">image #1</a>
Si vous voulez utiliser lightbox avec plusieurs images c'est là que j'ai un truc.
En effet, dans ce cas la commande à taper est rel="lightbox[roadtrip]" (où roadtrip est ici un groupe contenant les images que l'on veut voir dans cette même fenêtre)
<a href="http://www.blogger.com/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://www.blogger.com/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://www.blogger.com/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Mais à moins de refaire tous vos posts et d'héberger toutes ces images dans un site (votre site google par exemple) où les images sont dans une page avec des groupes, ce que je vous propose c'est de laisser les images où elles sont, c'est à dire sur des pages picasa générées automatiquement lorsque l'on publie un post. C'est pages ont des adresses tordues et dans un même post ne renvoient pas au même endroit.
Alors comment faire pour les grouper ? On ne peut pas ! mais un truc est identique à toutes ces images c'est l'ID du post publié. En effet, le post généré à un numéro qui peut servir de groupe. TADAM !!!!!!!!!
Cette idée m'est venue en voyant une vidéo sur le plugin Picasa lightBox pour les blogs Wordpress.
Comment connaître l'ID du post ?
Faire son post normalement sans se préoccuper de lightbox, faites votre mise en page etc... laissez blogspot générer des images petites, moyennes ou grandes selon votre mise en page.
Publier le message.
Afficher le message.
Faire un clic droit sur la page du post puis cliquez "Code source de la page"
une fenetre s'ouvre, CTRL+F (pour rechercher un mot), taper holder.currentPostId
holder.currentPostId = XXXXXXXXXXXXXXXXXXX
copier ce numéro XXXXXXXXXXXXXXXXXXX dans un document texte
Revenir a modifer le message en cliquant sur le crayon à la fin du post (ou en faisant précédent dans votre navigateur)
Copier tout le code HTML du message : CTRL+A (tout sélectionner) et CTRL+C (copier)
Ouvrir un document texte sur votre pc, puis coller tout le code CTRL+V (coller)
Faire CTRL+H (Replace) permet de remplacer un mot par un autre
étape 1 : taper dans la première ligne le texte à remplacer
étape 2 : taper dans la deuxième ligne le nouveau texte
étape 3 : puis cliquer sur "Remplacer tout"
Faire 2 fois ces 3 étapes pour charger le lightbox :D'abord pour appeler le script
étape 1 : ><img
étape 2 : rel="lightbox[post-XXXXXXXXXXXXXXXXXXX]"><img
étape 3 : "Remplacer tout"
Puis, pour que lightbox marche avec les grosses images
étape 1 : s1600-h/
étape 2 : s1600/
étape 3 : "Remplacer tout"
Copier tout ce nouveau code HTML : CTRL+A (tout sélectionner) et CTRL+C (copier)
Dans votre navigateur modifer le code HTML du message en le remplaçant par votre nouveau code.
Publier le message.
Merci d'avoir tenu bon jusqu'au bout et si vous voyez plus simple n'hésitez pas à votre tour à me faire passer le tuyau.
Aucun commentaire:
Enregistrer un commentaire