Privilège - Un carroussel d'images avec ImageFlow

En bougeant le curseur avec la souris, le carroussel défile

Voir le caroussel

1ère étape :

Allez sur DragonFly

Cliquez sur Download ImageFlowImageFlow_0.9.rar (22 kB)

Il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour le décompresser, j'utilise WinRAR - Extraire Vers.

2ème étape :

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

• vous créez un répertoire : imageflow
  • dans lequel vous enregistrez le fichier :
    
    • slider.png
    • loading.gif
      
  • vous notez l'adresse de ces images

3ème étape :

Sur votre PC :

• vous ouvrez le bloc-notes
• vous appelez le fichier screen.css
• vous modifiez l'adresse de l'image slider.png (vous l'avez noté à la 2ème étape)
• vous enregistrez sous le même nom

4ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - Imageflow :

• vous enregistrez les fichiers :
  
  • screen.css
  • imageflow.js

Le langage php n'étant pas utilisable sur Over-Blog, je ne tiens pas compte du fichier reflect.php. Il n'y a donc pas d'effet de reflet sous les images.

5ème étape :

Lors de la création de votre carroussel, vous copiez/collez en HTML

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

En rouge, vous remplacez par vos propres adresses de fichiers. SI vous êtes sur Over-Blog, vous pouvez utiliser les miennes.

Ensuite, on place le carroussel

<div id="imageflow">
    <div id="loading">
        <b>Loading images</b><br/>
        <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imageFlow/loading.gif"

width="208" height="13" alt="loading" />
    </div>
    <div id="images">
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Image_1" />
       
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Image_2" />
 
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="Image_3" />

<img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Image_4" />
       
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Image_5" />
       
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg"
longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="Image_6" />
    </div>
    <div id="captions"></div>
    <div id="scrollbar">
        <div id="slider"></div>
    </div>
</div>

En vert : l'adresse de loading.gif que vous avez noté lors de la 2ème étape
En bleu : les adresses de vos images. Vous constatez qu'elles vont toujours par pair
En orange : le titre de l'image qui apparaîtra dessous.