Grâce à l’extension Trans Slide Show de Flevooware, nous allons créer un diaporama, compatible avec tous les navigateurs. Vous pouvez ajouter jusqu’à 25 effets de transition (compatible IE 4+ PC uniquement).
Voici le résultat du tutorial.
Notre première étape consiste à charger l’extension nécessaire pour ce tuto :
- chez Flevooware : Trans Slide Show (extension gratuite).
Pour installer l’extension, vous pouvez suivre le tutorial consacré aux extensions.
Créons un dossier images_diap à la racine de notre site afin d’y mettre toutes les images du diaporama.
Créons une nouvelle page dans DMX, nommons-la index.html.
Insérons une première image dans la page (Insertion > Image), sélectionnons-la et dans le panneau Propriétés, nommons l’image (important pour la suite)…
Sélectionnons la balise <body> dans l’inspecteur de balise.
Nous allons maintenant appliquer le premier comportement.
Dans le panneau Inspecteur de balises onglet Comportement, cliquons sur le "+", allons jusqu’à Flevooware > Trans Slide Show > Trans Slide Show Init.
Une boite de dialogue s’ouvre :
- Base image : la première image qui apparait dans la page (donc celle que l’on a insérée)
- Pause between slides : vitesse entre deux images
- Transition duration : temps de transition entre deux images
- Show type : continuous circle : en continu ou play only once = jouer le diaporama une seule fois
Dans Slide details, ajoutons les images qui composent le diaporama en cliquant sur "+" puis en cherchant l’image avec Browse.
Show image transition : les effets pour les transitions (style fondu et compagnie qui ne fonctionnent que sur IE, testé et désapprouvé).
Cliquons sur OK.
Nous allons créer deux liens ‘lancer le diaporama" et "stop" pour appliquer le comportement sur la balise <a>. Pour cela, tapons les textes, sélectionnons le texte du lien comme ci-dessous et dans le panneau de propriétés, indiquons javascript:; dans le champ Lien.
Sélectionnons le lien "lancer le diaporama" et sélectionnons Trans Slides Show Play dans le panneau Inspecteur de balises > Flevooware > Trans Slides Show. Une boite de dialogue s’ouvre :
- Base image : image de départ.
- Show slide : indique le comportement qui s’appliquera au lien (next = suivant ; previous = précédent).
Sélectionnons Next/forward pour lancer le diaporama et cochons autoplay Slide Show pour qu’une fois lancé, le diaporama défile tout seul.
Cliquons sur OK.
Sélectionnons le lien "Stop". Puis dans le panneau Inspecteur de balises > Flevooware > Trans Slides Show > Trans Slides Show Stop, indiquons l’image de fin (qui apparemment est aussi l’image de début 
).
Cliquons sur OK.
Testons. Et c’est tout bon
