 |  |
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">En bleu : les grandes images
<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 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
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
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
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
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">puis les images. Je les ai mises dans un tableau, vous pouvez en rajouter autant que vous voulez.
</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" />
<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
