Agrandir une photo d'un clic de souris dans une PopBox

La PopBox permet plusieurs effets sur image, dont celui-ci. Cliquez sur l'image




Ce n'est pas très difficile à réaliser.

Première étape :

Allez sur PopBox

Cliquez sur Click here to download it now
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers

Deuxième étape :

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

1. créez un répertoire popbox
   
2. enregistrez y les fichiers
   
   1. magplus.cur
      
   2. magminus.cur
      
   3. spiner40.gif
      
   4. magminus.gif
      
   5. magplus.gif
      
3. notez leur adresse
   

Troisième étape :

Sur votre PC :

1. ouvrez le bloc-note
   
2. appelez le fichier style.css
   
3. modifiez les adresses des images (celle de la deuxième étape)
   
   1. magplus.cur
      
   2. magminus.cur
      
4. enregistrez sous le même nom
   

Quatrième étape :

Dans votre administration - Documents - Autres fichiers - popbox :

1. enregistrez le fichier style.css (que vous venez de modifier à la troisième étape)
   
2. notez son adresse
   

Cinquième étape :

Sur votre PC :

1. ouvrez le bloc-note
   
2. appelez le fichier popbox.js
   
3. modifiez les adresses des images (celles de la deuxième étape)
   
   1. spiner40.gif
      
   2. magminus.gif
      
   3. magplus.gif
      
4. enregistrez sous le même nom
   

Sixième étape :

Dans votre administration - Documents - Autres fichiers - popbox :

1. enregistrez le fichier popbox.js (que vous venez de modifier à la cinquième étape)
   
2. notez son adresse
   

Septième étape :

Lors de la création de votre article, dans la fenêtre de saisie en mode HTML, collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/popbox/PopBox.js" type="text/javascript"></script>
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/popbox/Styles.css" rel="stylesheet" type="text/css" />
<img id="château" src="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" pbshowcaption="true"
pbcaption="Le château de la Belle au Bous dormant." style="width: 150px; height: 100px;" class="PopBoxImageSmall" title="Cliquez pour agrandir l'image"
onclick="Pop(this,50,'PopBoxImageLarge');" name="Château" />

En personnalisant ce qui est en rouge