Galeries, Diaporamas & SlideShows

3) Faire une galerie sur un ensemble d'images - Lightbox 2.04

Table des matières
  1. Présentation
  2. Télécharger
  3. L'installation
  4. Les images
  5. Astuce
  6. Voir l'exemple
  7. A voir aussi

Présentation



Le même système LightBox2.04 ! Avec une nouvelle fonction. Compatible avec tout les navigateurs.

Télécharger



Commencez par télécharger : Lightbox-galerie-image-suivie.zip

une fois que vous avez téléchargé cette archive dézippez la avec 7zip.

L'installation



c'est très simple, l'index, dans l'archive est déjà faite.( Et oui, je vous facilite la tâche!)

Les images



Placez vos images miniatures et larges dans le dossier : images.
Ensuite, ouvrez index.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 :
 
<a href="images/landscape7.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape7a.jpg" alt="Landscape: image 1 de 2 thumb" width="100" height="40" border="0"></a>
<a href="images/landscape8.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape8a.jpg" alt="Landscape: image 2 de 3 thumb" width="100" height="40" border="0"></a>
<a href="images/landscape9.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape9a.jpg" alt="Landscape: image 3 de 4 thumb" width="100" height="40" border="0"></a>  
<a href="images/landscape10.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape10a.jpg" alt="Landscape: image 4 de 5 thumb" width="100" height="40" border="0"></a> 
<a href="images/landscape11.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape11a.jpg" alt="Landscape: image 5 de 6 thumb" width="100" height="40" border="0"></a>
<a href="images/landscape12.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape12a.jpg" alt="Landscape: image 6 de 7 thumb" width="100" height="40" border="0"></a>
<a href="images/landscape13.jpg" rel="lightbox[landscape]" title="Le script précharge l'image suivante.">
<img src="images/landscape13a.jpg" alt="Landscape: image 7 de 8 thumb" width="100" height="40" border="0"></a>
<a href="images/landscape14.jpg" rel="lightbox[landscape]" title="Appuyez sur Echap pour fermer.">
<img src="images/landscape14a.jpg" alt="Plants: image 8 de 9 thumb" width="100" height="40" border="0"></a>


Les images sont déjà présentes dans le dossier "images". Miniatures aussi ...

C'est l'attribut rel="lightbox[plants]" inséré dans le lien image qui va déclencher les JS placés précédemment dans la balise head.

1) Remplacez landscape7.jpg (image large) etc ... par les vôtres. Et faites de même pour les landscape7a.jpg (miniatures en 100x40px).

2) Pour faire la liaison entre les images apparaissant dans une même catégorie, dans le premier lien-image large<a href="xxx.jpg" rel="lightbox[landscape]" (landscape est la catégorie).

3) Pour le second lien-image miniature <img src="xxx.jpg" alt="Landscape: image 1 de 2 thumb" : Dans le ALT, en bleu la catégorie, et en vert l'ordre des images.

4) title="Légende facultative ." : Cela vous permettra de mettre une légende à votre image.

Astuce



Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc... Dans le dossier JS/lightbox.css.

Voir l'exemple





A voir aussi



Cette page a été vue 5343 fois