25 juil. 2010

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.

2 commentaires:

  1. Y a t-il une possibilité pour faire ce caroussel à la verticale? Merci pour votre réponse.

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)