Lightbox2


 

Voici la version Française lightbox2 

Téléchargement :

lightbox2_fr.zip 

Les modifications à apporter :

  • Fichier lightbox.js 
Complèter l'adresse de 2 images dans le script (*URL* est à remplacer par le chemin de votre hébergement) :

var fileLoadingImage = "*URL*/loading.gif";
var fileBottomNavCloseImage = "*URL*/closelabel.gif";
 
  • Fichier lightbox.css
Complèter l'adresse de 3 images dans le script (*URL* est à remplacer par le chemin de votre hébergement) :

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(*URL*/blank.gif) no-repeat;
...
#prevLink:hover, #prevLink:visited:hover { background: url(*URL*/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(*URL*/nextlabel.gif) right 15% no-repeat; }

 

  • dans votre page HTML
- Entre les balise <head> et </head>, ajouter les lignes suivantes (*URL* est à remplacer par le chemin de votre hébergement):
 
<link href='*URL* /lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='*URL* /prototype.js' type='text/javascript'></script>
<script src='*URL* /scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='*URL* /lightbox.js' type='text/javascript'></script>

 
 
- Pour les images:
 
Ajouter rel="lightbox" à la balise <a> que vous voulez activer avec lightbox. 
 
Par exemple:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Option : Utiliser le paramêtre title pour ce titre soit afficher par la lightbox

Si vous avez un ensemble d'images que vous souhaitez afficher en même temps, suivez la première étape mais en outre ajouter un nom de groupe entre crochets dans l'attribut rel.
 
Par exemple:
<a href="images/image-1.jpg" rel="lightbox[vacances2007]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[
vacances2007]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[
vacances2007]">image #3</a>

Il n'y a pas de limite au nombre d'images par groupe ou d'images par pages

 

Remarque pour les utilisateurs de Blogger :

Quand on intègre une image dans un message Blogger, l'option href de la balise <a> se trouve de la forme suivante
<a href="http://bp0.blogger.com/.../s1600-h/exemple.jpg">

Pour une utilisation de Lightbox, il faut enlever les 2 caractères -h car c'est en fait une page html contenant l'image
<a rel="lightbox" thref="http://bp0.blogger.com/.../s1600/exemple.jpg"> 


Merci à Philippe Chapuis pour son aide