Télécharger
Commencer par télécharger : Lightbox2 (3,87 Mo)
Cette archive à été repensé car à l'origine le css était inclus dans la page web. j'ai donc créer un fichier css à part, pour alléger la page html.
une fois que vous avez téléchargé cette archive dézippez la avec 7zip.
Commencer la galerie
Avant de commencer il vous faut savoir les deux formats d'images utilisés.
Les miniatures: 200x150 px
Les larges: 640x480 px
Les images
Placez vos images miniatures et larges dans le dossier : lbox.
Ensuite, ouvrez lightbox2.html avec votre éditeur web ou le bloc-note. c'est en regardant ce bout de code html que vous allez comprendre comment placer les images.
Code HTML :
<li><a href="/wiki/#portrait1"><img src="lbox/MINIATURE.jpg" alt="" title="" /><img class="large" src="lbox/LARGE.jpg" alt="" title="" /></a></li> <li><a href="/wiki/#portrait2"><img src="lbox/MINIATURE.jpg" alt="" title="" /><img class="large" src="lbox/LARGE.jpg" alt="" title="" /></a></li> <li><a href="/wiki/#portrait3"><img src="lbox/MINIATURE.jpg" alt="" title="" /><img class="large" src="lbox/LARGE.jpg" alt="" title="" /></a></li> <li><a href="/wiki/#portrait4"><img src="lbox/MINIATURE.jpg" alt="" title="" /><img class="large" src="lbox/LARGE.jpg" alt="" title="" /></a></li> <li><a href="/wiki/#portrait5"><img src="lbox/MINIATURE.jpg" alt="" title="" /><img class="large" src="lbox/LARGE.jpg" alt="" title="" /></a></li>
Remplacer MINIATURE.jpg par les votres. Et faites de même pour les LARGE.jpg .
Astuce
1) Dans la page lightbox2.html en édition, repérez les catégories. Cela vous facilitera la tache lors du placement des images.
2) Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc... Dans lightbox2.css.
Voir l'exemple
