Les extensions

Notre première étape consiste à charger l'extension nécessaire pour ce tuto :

- chez Flevooware : Trans Slide Show (extension gratuite).

Préparation

Pour installer l'extension, nous devons dans un premier temps fermer DMX, lancer Extension Manager et installer l'extension. Vous devez obtenir ceci :

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.

Le diaporama

Insérer une première image dans la page (Insertion/image), la sélectionner et dans le panneau de Propriétés, bien nommer l'image (important pour la suite)...


Sélectionner la balise <Body> dans l'inspecteur de balise.

Nous allons maintenant appliquer le premier comportement.
Dans le panneau Inspecteur de balises onglet Comportement, cliquer sur le "+", aller 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, ajouter 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é).
Cliquer sur OK.

La Navigation

Faire des liens fictifs "lancer le diaporama" et "stop" sur la page.

Sélectionner le lien "lancer le diaporama" et dans le panneau Inspecteur de balises/Flevooware/ Trans Slides Show / Trans Slides Show Play. 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électionner Next/forward pour lancer le diaporama et cocher autoplay Slide Show pour qu'une fois lancé, le diaporama défile tout seul. Cliquer sur OK.

Sélectionner le lien "Stop". Puis dans le panneau Inspecteur de balises/Flevooware/ Trans Slides Show / Trans Slides Show Stop, indiquer l'image de fin (qui apparemment est aussi l'image de début ;) ).

Cliquer sur OK.

Tester.