Privilège - Créer une galerie d'images - Thickbox

Toujours dans la même veine que les articles :

• Agrandir d'un simple clic une image - Lightbox
• Agrandir d'un simple clic une image et la déplacer sur l'écran - Highslide
• Agrandir une image d'un clic avec effet sombre - Lightview

Voici un exemple :

 

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 mode source 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.

• 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 votre administration - 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 pour mettre la votre. (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 pour mettre la votre. (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 :

Lorsque vous voulez placer votre galerie d'image, en mode source, 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