|
Lightbox
JS v2.0
by Lokesh Dhakar
Traduction et mise en place par Albidochon
Manuel d'utilisation:
Première partie - Mise en place
- télécharger le zip ICI
La Lightbox v2.0 utilise les librairies d'effets "scriptaculous" et "prototype" en plus de la librairie lightbox. Vous devrez déclarer ces rois scripts dans votre header ou dans l'en-tête de votre blog ou votre site :
<script type="text/javascript" src="url de prototype.js"></script>
<script type="text/javascript" src="url de scriptaculous.js?load=effects"></ script>
<script type="text/javascript" src="url de lightbox.js"></script>
|
Ajouter le lien externe au fichier "Lightbox CSS" si il y a lieu, toujours dans l'en-tête de votre blog, ou intégrer le contenu du fichier dans votre css pour déclarer les styles de la Lightbox.
<link rel="stylesheet" href="url de lightbox.css" type="text/css" media="screen"/>
|
Vérifier le lightbox.css et asssurez vous que les références aux fichiers prevlabel.gif ,nextlabel.gif et blank.gif soient bien à la bonne URL. Assurez vous aussi que le loading.gif et closelabel.gif soient correctement référencés (que l'url soit correcte) dans le lightbox.js. ils se situent près du début du fichier lightbox.js.
Seconde partie - Activation
Ajouter l'attribut rel="lightbox" à chague tag href auquel vous voulez appliquer l'activation de la lightbox. Par exemple:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> |
Optionellement: utiliser l'attribut "title" si vous voulez écrire une légende.
Si vous avez un ensemble d'image sur un thème commun que vous aimeriez regrouper, passez par l'étape une, mais incluer en plus un nom de groupe entre les crochets dans l'attribut "rel". Par exemple :
<a href="url de image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="url de image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="url de image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
|
Il n'y a pas de limites au nombre
d'images à regrouper dans une page ainsi que du nombre d'images regroupées
dans un bloc "nom de groupe". Vous devez, à chaque image, chercher avec
la souris, vers le haut à gauche, le bouton "prev" (précédent) et en
haut à droite le bouton "next" (suivat) ils n'apparaissent pas
tous seuls. Sur les conseils avisés de Fransizek, mettez le style display="none"
à toutes les images, sauf la première, cela vous évitera d'avoir une
ligne de vilains thumbnails, et mettez la première image en taille réelle,
elle vous servira de lien de lancement.....
....Amusez vous bien ! .....
Sur cet autre article, en lien sur l'image, vous avez deux exemples de lightbox,
l'image par image ou le diaporama, dessous.
 Citez cet article
|
- Les messages comportant des attaques verbales contre les personnes seront supprimés.
- Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
- Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved |
Commenter cet article
