PcKULT.NET - La référence en informatique

Comment utilisé Lightbox:

1 - Installation

1. Lightbox v2.0 utilise le framework Prototype et Scriptaculous Effects Library.  Vous aurez donc besoin d'inclure les fichier suivant afin d'utilisé Lightbox dans votre page HTML.
   
   <script type="text/javascript" xsrc="js/prototype.js"></script>
   <script type="text/javascript" xsrc="js/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" xsrc="js/lightbox.js"></script>
   
   
2. Inclure la feuille de style du Lightbox ou inclure celui-ci dans la feuille de style déjà présente sur votre site s'il y a lieu.
   
   <link rel="stylesheet" xhref="css/lightbox.css" type="text/css" media="screen" />
   
   
3. Vérifier la feuille de style afin que les fichiers prev.gif et next.gif soit dans le bon répertoire. Vérifier aussi les fichiers loading.gif et close.gif.

 2 - Activation

1. Ajouter rel="lightbox" comme attribut aux liens de l'images que vous voulez voir appliquer le lightbox Add a rel="lightbox" attribute to any link tag to activate the lightbox :
   
   <a xhref="images/image-1.jpg" rel="lightbox" title="Titre de l'image">Image #1</a>
   
   Optionel: Utilisé l'attribut title si vous voulez afficher un titre sous l'image.
   
   
2. Si vous avez une "galerie" d'image à afficher, suivez les étapes suivante :
   
   <a xhref="images/image-1.jpg" rel="lightbox[Voyage]">image #1</a>
   <a xhref="images/image-2.jpg" rel="lightbox[Voyage]">image #2</a>
   <a xhref="images/image-3.jpg" rel="lightbox[Voyage]">image #3</a>
   
   Aucune limite d'image n'est implanté comme limitation.

Télécharger Lightbox 2.0:

•  Lightbox JS v2.02