Lightbox JS v2.0

by Lokesh Dhakar

Exemple

Comment l'utiliser :

Partie 1 - installation

1. Lightbox v2.0 nécessite les librairies Prototype Framework et Scriptaculous Effects. Vous avez besoin inclure ces fichiers javascript dans l'entète de votre page (balises header).

   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" src="js/lightbox.js"></script>
   

2. Il faut de plus ajouter le fichier CSS de Lightbox (vous pouvez sinon copier-coller les styles dans votre fichier CSS principal).

   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   

3. Vérifier les feuilles de styles et assurez-vous que les fichiers prevlabel.gif et nextlabel.gif sont au bon endroit. Vérifiez également que la référence des images loading.gif and closelabel.gif dans le haut du fichier lightbox.js (ligne 63 - configuration) est correct.

Partie 2 - activation

1. Ajoutez l'attribut rel="lightbox" à une balise de lien pour activer lightbox. Par exemple :

   <a href="images/image-1.jpg" rel="lightbox" title="Titre de l'image">image #1</a>
   

   Facultatif: Utilisez l'attribut title pour afficher le titre de l'image.
2. Si vous avez un ensemble d'images que vous souhaitez grouper, suivez la première étape, et ajoutez à l'attribut rel un nom de groupe entre crochets. Par exemple:

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
   

   Aucune limite au nombre de séries d'images par page ou le nombre d'images qui sont autorisés dans chaque série. Ne vous privez!

Tutoriel d'installation