Créer un slideshow avec clearbox

Un slideshow pas très difficile à réaliser.

Testez en cliquant et survolant avec la souris.



Première étape :

Allez sur CLEARBOX, il s'agit d'un site hongrois (pour la traduction, c'est un véritable plaisir).

Cliquez sur ClearBox full (js, css, képek) : clearbox.zip

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

Deuxième étape :

Dans l'administration de votre blog - Mes documents - autres fichiers :

• vous créez un répertoire clearbox
  
  
  
  
  • dans ce répertoire, vous créez un sous-répertoire : pic
    
    
    
    
    • dans ce sous-répertoire, vous uploadez les fichiers suivants :
      
      
      
      
      • Image blank.gif
        
      • Image close.png
        
      • Image loading.gif
        
      • Image max.gif
        
      • Image next.gif
        
      • Image noprv.gif
        
      • Image pause.png
        
      • Image prev.gif
        
      • Image s_btm.png
        
      • Image s_btmleft.png
        
      • Image s_btmright.png
        
      • Image s_left.png
        
      • Image s_right.png
        
      • Image s_top.png
        
      • Image s_topleft.png
        
      • Image s_topright.png
        
      • Image start.png
        
      • Image white.gif
        
    • Notez les adresses de ces images
      

Troisième étape :

Sur votre PC, ouvrez le bloc note :

• appelez le fichier clearbox.css
  
• modifiez les adresses des images
  
  
  
  
  • #CB_TopLeft {    background-image:url(../pic/s_topleft.png);   background-position:right bottom;}
    #CB_Top { background-image:url(../pic/s_top.png); background-position:left bottom;}
    #CB_TopRight {   background-image:url(../pic/s_topright.png);    background-position:left bottom;}
    #CB_Left {    background-image:url(../pic/s_left.png);    background-position:right top;}
    #CB_Right {    background-image:url(../pic/s_right.png);    background-position:left top;}
    #CB_BtmLeft {    background-image:url(../pic/s_btmleft.png);    background-position:right top;}
    #CB_Btm {    background-image:url(../pic/s_btm.png);    background-position:left top;}
    #CB_BtmRight {    background-image:url(../pic/s_btmright.png);    background-position:left top;}
    #CB_Prev, #CB_Next {    background: transparent url(../pic/blank.gif) no-repeat scroll 0%;  display: block;        width: 49%;    cursor: pointer;    outline-style:none;    z-index:
    1102;}
    #CB_Prev:hover {background:transparent url(../pic/prev.gif) no-repeat scroll left 50%;}
    #CB_Next:hover {background:transparent url(../pic/next.gif) no-repeat scroll right 50%;}
    

en remplaçant par celles de l'étape 2

• enregistrez le fichier sous le même nom
  

Quatrième étape :

Dans votre administration - Mes Documents - Autres fichiers - dans le répertoire clearbox :

• vous créez un sous-répertoire css
  
  
  
  
  • dans lequel, vous uploadez le fichier clearbox.css
    
• vous créez un sous-répertoire js
  
  
  
  
  • dans lequel, vous uploadez le fichier clearbox.js
    

Cinquième étape :

Lors de la rédaction de votre article, dans votre éditeur, en mode source/HTML, vous collez

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

avec vos propres adresses de fichiers (en rouge). Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses.

Placez maintenant vos photos

<a rel="clearbox[gal1]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" /></a>
<a rel="clearbox[gal1]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" /></a>
<a rel="clearbox[gal1]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO004.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" />

En bleu, la photo en grande taille
En vert, la photo en miniature