Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

jeudi 31 janvier 2008

Une lightbox pour afficher ses images


lightbox.js est un script de Lokesh Dhakar permettant d'afficher une image dans la page courante, avec un effet de transparence.

Un exemple, à partir d'une vignette ou d'un lien, affichons l'image agrandie à l'intérieur de la page courante :

Château Vufflens



Les éléments à télécharger

Utiliser un hébergeur comme Google Sites, pour enregistrer à partir du site original :

Le script : lightbox.js

La feuille de style : lightbox.css

Une animation chargement en cours : loading.gif

L'icône fermer la fenêtre : close.gif

L'image utilisée pour l'effet de transparence (opacité 80 %) : overlay.png

Les modifications à apporter

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';


De même, donner l'adresse de l'image de fond, dans la feuille de style (l'image blank.gif n'existe pas, c'est un leurre pour assurer le traitement correct de la transparence des fichiers PNG sous IE) :


#overlay {
background-image: url(*URL*/overlay.png) }

* HTML #overlay {
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="*URL*/overlay.png", sizingMethod="scale");}


Pour configurer le conteneur de l'image, il faut modifier l'id lightbox :


#lightbox /*style du conteneur */
{
border-right: #666 2px solid; /* la bordure du conteneur */
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: #666 2px solid;
background-color: #eee; /* la couleur du conteneur */
}


L'utilisation avec Blogger

Pour utiliser lightbox dans un seul post, ajouter au début du post l'appel au script :


<script src='*URL*/lightbox.js' type='text/javascript'></script>


Placer ce script entre les balise <head> et </head> si lightbox doit être utilisé dans plusieurs posts.

De même, entre les balises <head> et </head>, faire l'appel à la feuille de style destinée à configurer l'affichage de l'image :


<link rel="stylesheet" type="text/css" href="*URL*/lightbox.css" />


L'appel d'une image avec l'effet lightbox se fait simplement en ajoutant rel="lightbox" dans l'ancre :


<a href="URL de l'image à afficher" title="titre image" rel="lightbox">le lien pour l'image à afficher ou un tag <img> avec une vignette</a>



Le cas particulier des grandes images

Si l'ancre contient l'adresse d'une grande image (cas fréquent sur Blogger), l'adresse est du type :


<a href="http://bpn.blogger.com/.../.../
.../s1600-h/NOM_IMAGE.jpg" rel="lightbox"...>



L'insertion de rel="lightbox" ne fonctionnera pas ! Le répertoire s1600-h contient en effet des pages html avec l'image à afficher, et non pas une image en tant que telle. Il faut remplacer le nom du répertoire à utiliser :


<a href="http://bpn.blogger.com/.../.../
.../s1600/NOM_IMAGE.jpg" rel="lightbox" ...>



Un exemple


Château AllamanDomaine du ManoirChâteau Maison Blanche


lightbox 2 : Afficher un ensemble d'images

La version 2, du même auteur, utilise le Framework Prototype et la bibliothèque Scriptaculous. Si elle autorise des effets graphiques plus performants, elle impose néanmoins de charger sur les pages qui utilisent lightbox2, plus de 50K de code. Les images sont appelées en utilisant la technologie AJAX.
Le principal avantage de cette version réside dans la possibilité d'afficher un ensemble d'images.

Sauvez la DPI a réalisé une version française (des images gif avec les textes en français). Un grand merci donc, de mettre à notre disposition un fichier *.zip complet.

Plus d'informations

Une explication plus complète sur mon site : Display your Pictures with Lightbox.

Un ensemble d'images affiché avec la version 2.

Un clone de lightbox, slimbox

La série complète des photos (la noblesse des vins suisses) présentée avec un slideshow

Les article originaux : la version 1 de lightbox.js et la version 2. Slimbox, un clone de lightbox.
Enregistrer un commentaire