Caroussel d'images façon PRO

Impressionnez votre entourage en créant avec vos plus belles images, ce  caroussel d'images que vous pouvez faire fonctionner en LOCAL (sur votre  ordinateur) ou en le transférant sur votre site. On installe AUCUN programme - Faut juste le flash player que vous irez télécharger sur le site d'ADOBE si vous ne l'avez pas !

Vous préparez un dossier quelconque pour accueillir les sous-répertoires suivants:


Dans  la racine on aura le fichier index.html : on a la balise entre  <title> </title> qu'on peut modifier. Ce sera le texte qui  sera affiché dans votre naviguateur.

Ensuite on a les répertoires suivants:

/swf
/js

/css

/images/full -  Vous mettez  ici vos images HD en résolution 2000 x 2000 pixels MAXI, avec une  compression de 200KO à 300Ko   maxi, au format JPG - vous les nommez  comme vous voulez : exemple: vu01jpg, vu02.jpg, ext...

/images/thumbnails -  Ici comme précedement la MEME image avec le MEME nom mais avec une résolution 600 x 600 pixels MAXI.

/xml/caroussel.xml  - Ici on va éditer le fichier XML avec un éditeur quelconque  (bloc-notes) et on va modifier le contenu entre les balises  <asset>  et </asset>



<asset>

<media type="image" path="images/full/<span style=">vu01.jpg"

thumbnail="images/thumbnails/<span style="color: #408000">vu01.jpg</span>"

tooltip="<span style="gt;nom de l'image</span>"

color="0x000000"


url=""

target="_blank"


></media>

<title><![CDATA[<span >nom principal image</span>]]></title>

<description><!--[CDATA[<span style="font-size:18;color:#333333;"><span style="color: #408000">infos supplémentaires</span>]]></description>

</asset>

Dans la section path=   vous mettez le nom HD de votre 1er image

Dans la section thumbnail=  idem ici avec le même nom de cette même image en 600x600.

Dans la section tooltip= on met un texte aussi - ce sera affiché lorqu'on passe la souris sur l'image dans le caroussel.

Dans la section CDATA entre [ ] on met aussi une indication sur l'image.

Dans la section description entre > < on met des infos supplémentaires.


ATTENTION à ne pas effacer un [] ou un <> !!! Les autres fichiers on n'y touche pas !

Voilà cela c'est pour UNE  image - On fait la même chose pour les autres images du caroussel, avec  le même principe - On peut même faire un COPIER/COLLER du contenu de la  balise & cela déterminera le nombre  d'images dans le caroussel. On modifiera juste le nom de l'image &  sa description.

Quand tout est fini on lance par index.html

Regardez un exemple ici: http://11-9-2001.voila.net - Avec le zoom on regarde ses photos tout autrement !

Mode d'emploi:  On a un petit chronomètre en haut à droite de chaque image pour un  défilement AUTO, le ZOOM quand on clique au centre de l'image d'en face,  et en-dehors du centre on a la vue globale du caroussel que l'on dirige  au déplacement de la souris...

A VOUS D'EPATER MAINTENANT .... Les fichiers à télécharger (archive 2 MO ) ci-dessous
http://www.megaupload.com/?d=8S5GHI6S                     

                                                                                                           x
x