Une lightbox pour afficher ses images

lecteurs

Une lightbox pour afficher ses images

source


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.

 

No ratings yet - be the first to rate this.

إضافة تعليق

You're using an AdBlock like software. Disable it to allow submit.

التعديل الأخير تم: 04/10/2015