Créer un slideshow avec thickbox

Voici le slideshow proposé par Thickbox. Cliquez sur une photo et admirez :





VERSION SIMPLIFIEE

Pour les blogs sur OverBlog, vous pouvez utiliser mes fichiers. Vous ne devez donc modifier que les adresses des images

A coller en html en respectant l'ordre :

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/jquery.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.css" type="text/css" media="screen" />

puis les images. Je les ai mises dans un tableau, vous pouvez en rajouter autant que vous voulez.

<table cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Plant 1" /></a></td>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Plant 2" /></a></td>
</tr>
</tbody>
</table>

En bleu : les grandes images
En vert : les petites images
En rouge : le texte qui apparaîtra sous la grande photo

VERSION DETAILLEE

Première étape :

Allez sur Thickbox

Dans la catégorie Download, cliquez sur :

• thickbox.js
• thickbox.css
• jQuery JavaScript library

A chaque fois, pour ces trois fichiers, vous ferez une copie de ce qui apparaît à l'écran. Vous collerez le contenu dans le bloc-notes et vous enregistrerez sous le même nom.

Puis :

• loadingAnimation.gif

C'est une image, vous la sauvegardez en cliquant sur le bouton droit de la souris - sauvegardez sous...

Dans la catégorie How to Implement ThickBox, paragraphe 2, cliquez sur :

• macFFBgHack.png

C'est une image, vous la sauvegardez en cliquant sur le bouton droit de la souris - sauvegardez sous...

Deuxième étape :

Dans l'administration de votre blog - Documents - autres fichiers :

• vous créez un répertoire : thickbox
• dans lequel vous enregistrez loadingAnimation.gif et macFFBgHack.png

vous notez les adresses de ces images

Troisième étape :

Sur votre PC, avec le bloc-notes :

• vous ouvrez le fichier thickbox.js et cherchez la ligne var tb_pathToImage = "images/loadingAnimation.gif";

Elle est au début. Vous modifiez l'adresse de l'image par la vôtre. (voir la 2ème étape)

Vous enregistrez, toujours sous le même nom.

• vous ouvrez le fichier thickbox.css et cherchez la ligne .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

Vous modifiez l'adresse de l'image par la vôtre. (voir la 2ème étape)

Vous enregistrez, toujours sous le même nom.

Quatrième étape :

Dans votre administration - Documents - autres fichiers - répertoire thickbox :

• vous enregistrez les fichiers : thickbox.js, jquery-latest.js, thickbox.css

Vous notez les adresses de ces fichiers

Cinquième étape :

En html, vous collez en respectant l'ordre et en personnalisant les adresses

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/jquery.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.css" type="text/css" media="screen" />

puis les images. Je les ai mises dans un tableau, vous pouvez en rajouter autant que vous voulez.

<table cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Plant 1" /></a></td>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Plant 2" /></a></td>
</tr>
</tbody>
</table>

En bleu : les grandes images
En vert : les petites images
En rouge : le texte qui apparaîtra sous la grande photo