Un carroussel d'images avec ImageFlow - Privilège

Publié dans : Effets d'Images et diaporamas - Tous blogs

Un carroussel d'images avec ImageFlow - Privilège

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 sur les images.

5ème étape :

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

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.

MàJ:Janvier 2009

Voir les 3 commentaires - Ecrire un commentaire
Recommander

Précédent : Ouvrir un texte au clic de la souris Retour à l'accueil

Commentaires

Pas mal ce petit carroussel passe un bon dimanche en famille gros bisous :)

Commentaire n° 1 posté par Jean Michel le 08/06/2008 à 10h24

Bonjour Anna
Petite tournée du dimanche pendant que je suis encore un peu tranquille. Il faut bien que je pense à tous mes amis blogueurs. Grisaille aujourd’hui, aura-t’on un été bientôt, ou sera-t’il aussi pourri que le printemps ? Ce temps instable engendre parfois la mélancolie car il s’ajoute à des temps difficiles. Et Charles Aznavour dans une chanson a dit : la misère est moins pénible au soleil ! Je ne sais pas si c’est vrai mais en tout cas, on a meilleur moral Bisous et bon dimanche

Commentaire n° 2 posté par stella

le 08/06/2008 à 10h36

Bonjour,
Juste pour dire bravo à ce site pleins de ressources de qualité.
Ce carroussel est pas mal ;)

Bonne continuation

Commentaire n° 3 posté par bookmarkeurs le 09/06/2008 à 00h46