Créer un carroussel de photos avec imageFlow

Cliquez sur ce lien, bouger le curseur et le carroussel défile : Voir le caroussel
Joli, non ? Voici comment le réaliser.

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 les fichiers : slider.png et 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 et 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 sur 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, en collant à la suite en HTML :

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