Widget Sliding Image


Apps - Widget - Sliding Image icon.png Ce type de widget appartient à la catégorie Basic de la bibliothèque des widgets. Il permet d'insérer un diaporama faisant défiler une suite de diapositives, chacune affichant une image

  • Un ensemble de propriétés permet de configurer le comportement du diaporama en mode Exécution (défilement automatique, mode d'affichage de la navigation, …).

Remarques

  Open url.png  voir Remarques générales sur les widgets

  • L'ordre de la liste Slides Image définit l'ordre d'apparition des diapositives dans le diaporama.

Attention

  • Si vous désactivez le défilement automatique du diaporama (option Timer), affichez les flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png (option Navigation Arrows). Sinon, l'utilisateur ne pourra pas actionner le diaporama.

Best Practice big icon.pngBonnes pratiques

  • Pour insérer dans le diaporama du texte, des images, des pages Html ou des pages d'une autre application, utilisez le widget Sliding Panel qui donne accès à l'éditeur de texte.
  • Pour insérer dans le diaporama uniquement des pages d'une autre application, utilisez le widget Sliding Page.

Exemple

Affichage d'un diaporama comprenant 3 images
    EVApps - widget Sliding Image - Example.png

Liste des propriétés

Content

Slides Image : Liste des images constituant le diaporama. Cliquez sur [ ADD ITEM ] pour en ajouter une nouvelle -  Open url.png  voir  Procédure
         EVApps - widget Sliding Image - Image list.png

  • Apps - Order objects icon.png : Permet de modifier l'ordre des diapositives du diaporama.
  • Apps - Select image icon.png : Permet d'ouvrir la bibliothèque d'images, afin de sélectionner l'image de la diapositive, disponible sur un serveur local ou sur internet.
    • Dès qu'une image est sélectionnée, sa représentation miniature est affichée (2).
    • Pour supprimer l'image associée, ouvrez la bibliothèque et cliquez sur [ CLEAR ICON ].
  • Apps - Delete icon.png : Permet de supprimer une diapositive du diaporama.
  • Image - Repeat Size Position properties - Dropdown list.png : Permet de personnaliser l'affichage d'une diapositive, via différentes propriétés appliquées à l'image. Cliquez sur la liste déroulante.
             Image - Repeat Size Position properties.png
    BackgroundImageProperties

    Repeat : Définit la façon dont l'image est répétée dans la zone dédiée à l'arrière-plan.

    no-repeat repeat repeat-x repeat-y

    Aucune répétition de l'image

    Image - Repeat property - No Repeat.png

    Répétition horizontalement et verticalement

    Image - Repeat property - Repeat.png

    Répétition horizontalement

    Image - Repeat property - Repeat x.png

    Répétition verticalement

    Image - Repeat property - Repeat y.png

    L'image est répétée autant de fois que nécessaire pour recouvrir la zone. La dernière image est rognée si nécessaire.

    Size : Définit la taille de l'image.

    Initial size Scale to fit Scale to cover

    Taille originale

    Image - Size property - Initial.png

    Image agrandie pour s'ajuster à la hauteur de la zone dédiée à l'arrière-plan, tout en conservant ses proportions hauteur/largeur

    Image - Size property - Scale to fit.png

    Image agrandie en largeur et en hauteur pour recouvrir entièrement la zone dédiée à l'arrière-plan. Note : Une partie de l'image peut être masquée.

    Image - Size property - Scale to cover.png

    Position (H/V) : Définit la position de l'image dans la zone dédiée à l'arrière plan.

    • La première valeur indique le positionnement horizontal de l'image dans la zone : par rapport au bord gauche (left), au bord droit (right) ou au centre (center).
    • La seconde valeur indique le positionnement vertical de l'image dans la zone : par rapport au haut (top), au bas (bottom) ou au centre (center).
    • Si l'image est répétée sur toute la surface (Repeat = repeat), la propriété Position provoque simplement un décalage du motif.

Setup

Animation : Permet de définir l'effet de transition entre les diapositives du diaporama : soit application d'un effet estompé (option Fade), soit aucun effet (option Slide).

Timer Speed : Vitesse de défilement du diaporama, exprimée en millisecondes, permettant de définir la durée d'affichage de chaque diapositive.

Pause On Hover : Lorsque le diaporama est pointé par la souris, indique si celui-ci s'arrête automatiquement (case cochée) ou non (case non cochée).

Resume On Mouseout : Lorsque le diaporama n'est plus pointé par la souris, indique si celui-ci redémarre automatiquement (case cochée) ou non (case non cochée).

Next On Click : Indique si le défilement entre les diapositives peut s'effectuer en cliquant sur le diaporama, sans attendre que la durée d'affichage éventuellement définie via l'option Timer Speed soit écoulée (case cochée) ou non (case non cochée).

Animation Speed (Note : À renseigner lorsque l'effet de transition entre les diapositives est Fade) : Durée mise par le système pour afficher entièrement chaque diapositive, exprimé en millisecondes.

Stack on Small : Indique si les diapositives sont empilées les unes sous les autres, de façon statique (case cochée - utilisez cette option pour un affichage sur un support graphique de petite résolution, tel un smartphone) ou si elles défilent horizontalement sur le diaporama (case non cochée). Note : Cette option est prise en compte pour un support graphique dont la hauteur est inférieure ou égale à 40 em (l'unité em est relative à la taille de la police).

Case cochée Case non cochée
Apps - widgets Sliding - Stack on Small On.png Apps - widgets Sliding - Stack on Small Off.png

Navigation Arrows : Indique si les flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png sont affichées sur les côtés du diaporama (case cochée) ou sont masquées (case non cochée).

Case cochée Case non cochée
Apps - widgets Sliding - Navigation Arrows On.png Apps - widgets Sliding - Navigation Arrows Off.png

Slide Number : Indique si la numérotation des diapositives est visible (case cochée) ou masquée (case non cochée) sur le diaporama. Notes : Le numéro d'ordre de la diapositive apparaît en haut à gauche du diaporama, suivi du nombre total de diapositives. Si l'ordonnancement des diapositives est modifié dans le diaporama, le numéro d'ordre de chaque diapositive est automatiquement modifié.

Slide Number Text : Texte affiché entre le numéro d'ordre de la diapositive courante et le nombre total de diapositives.
         Example documentation icon FR.png  Slide Number Text : sur un total de ==> texte affiché sur le diaporama pour la diapositive n° 2 : 2 sur un total de 3

Bullets : Indique si des pastilles Apps - widget Sliding - Bullets icon.png sont affichées sous le diaporama, chacune représentant une diapositive et permettant d'accéder directement à celle-ci (case cochée), ou non (case non cochée).

Case cochée Case non cochée
Apps - widgets Sliding - Bullets On.png Apps - widgets Sliding - Bullets Off.png

Circular : Indique si le diaporama tourne en boucle (case cochée) ou s'arrête après la dernière diapositive (case non cochée).

Timer : Indique si le diaporama peut s'exécuter en mode automatique (case cochée) ou non (case non cochée). Notes : Lorsque le timer est actif, la barre de progression (montrant le temps restant d'affichage de la diapositive) et les boutons Pause Apps - Pause icon.png / Reprise Apps - Play icon.png sont affichés en haut à droite du diaporama.
 

Color Of The Ui Elements : Couleur de la pastille de défilement des images inactives.

Color Of The Ui Elements (active) : Couleur de la pastille de défilement de l'image active et couleur des flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png.
         Example documentation icon FR.png  Apps - widgets Sliding - Color Ui elements.png

Theme

  Open url.png  voir Description des propriétés

 

Procédure : Comment créer un diaporama

1. Cliquez sur [ ADD ITEM ] ; sélectionnez l'image souhaitée en cliquant sur Apps - Upload icon.png.

2. De la même façon, sélectionnez les autres images du diaporama, dans l'ordre souhaité d'apparition des diapositives.

  • Pour modifier l'ordre de la liste Slides Image, cliquez-glissez la diapositive souhaitée vers sa nouvelle position via Apps - Order objects icon.png.
  • Pour supprimer une diapositive du diaporama, cliquez sur Apps - Delete icon.png.

3. Définissez les paramètres du diaporama via la section Setup.

4. Passez en mode Exécution EVApps - GUI - Execute icon.png pour visualiser le diaporama tel qu'il apparaîtra à l'utilisateur.

Tags:
Modifié par Utilisateur inconnu le 2017/09/15 16:36
Créé par Administrator XWiki le 2015/04/15 17:05

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020