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

De jolis effets pour une astuce pas très difficile à réaliser. Il faut que vous puissiez mettre du javascript sur votre blog.

Testez en cliquant sur chaque image : l'effet est différent.

• 
  
  
• 
  
  
• 
  
  

Etape 1 :

Allez sur Ibox
Cliquez sur ibox.2.17c.zip

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers

Etape 2 :

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

• vous créez un répertoire ibox
  
  • dans lequel vous créez un sous-répertoire images
    
    • dans lequel vous enregistrez :
      
      • bg.png
        
    • vous notez son adresse
      

Etape 3 :

Sur votre PC, vous ouvez votre Bloc-Notes, vous appelez le fichier ibox.js :

• vous recherchez le fichier bg.png
  
• vous modifiez son adresse (vous l'avez noté à l'étape 2)
  
• vous enregistrez sous le même nom
  

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - répertoire ibox :

• vous enregistrez le fichier ibox.js
  
• vous notez son adresse
  

Etape 5 :

En HTML, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script>
<ul>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_1b.jpg"  rel="ibox" title="Good Barbeque at 1024x450!"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_1.jpg" alt=""/></a></li>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_2.jpg" rel="ibox" title="500x426!" ><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_2.jpg" alt=""/></a></li>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_3.jpg" rel="ibox" title="Auto Detect Image Size" ><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_3.jpg" alt=""/></a></li>
</ul>

Vous personnalisez :

• en rouge, l'adresse de votre fichier ibox.js : vous l'avez noté à l'étape 4
  
• en bleu, l'adresse des grandes images qui apparaissent après le clic
  
• en vert, l'adresse des petites images qui apparaissent sur le blog
  
• en orange, les titres