Sliding Image Widget


Apps - Widget - Sliding Image icon.png This widget belongs to the Basic category in the widget library. It enables you to insert a slideshow showing a series of slides, each of them displaying an image

  • A set of properties is used to configure the behavior of the slideshow in execute mode, e.g. auto advance, navigation display mode, etc.

Notes

  Open url.png  See General remarks on widgets.

  • The order in the Slides Image list defines the order in which slides are displayed in the slideshow.

Caution

  • If you disable the auto advance function of the slideshow (Timer option), you should display the Previous Apps - Previous icon.png and Next Apps - Next icon.png arrows (Navigation Arrows option). If you do not do so, users will not be able to view the slideshow.

Best Practice big icon.pngBest practice

  • To insert text, images, HTML pages or pages from another app in the slideshow, you should use the Sliding Panel widget which opens the text editor.
  • To insert only pages from another app in the slideshow, you should use the Sliding Page widget.

Example

You want to display a slideshow containing three images
    EVApps - widget Sliding Image - Example.png

List of properties

Content

Slides Image: List of images included in the slideshow. Click [ ADD ITEM ] to add a new one. Open url.png See the procedure.
         EVApps - widget Sliding Image - Image list.png

  • Apps - Order objects icon.png: Used to modify the order of slides in the slideshow.
  • Apps - Select image icon.png : Used to open the icon gallery in order to select an image for the slideshow from the local server or from the Internet.
    • Once you have selected an icon, its thumbnail will appear (2).
    • To delete the associated image, open the icon gallery and click [ CLEAR ICON ].
  • Apps - Delete icon.png : Used to delete a slide from the slideshow.
  • Image - Repeat Size Position properties - Dropdown list.png : Used to customize the slide display using different properties applicable to the image. Click to show the drop-down list.
             Image - Repeat Size Position properties.png
    BackgroundImageProperties

    Repeat: Used to define the way in which the image is repeated in the background.

    no-repeat repeat repeat-x repeat-y

    The image is not repeated.

    Image - Repeat property - No Repeat.png

    The image is repeated horizontally and vertically.

    Image - Repeat property - Repeat.png

    The image is repeated horizontally.

    Image - Repeat property - Repeat x.png

    The image is repeated vertically.

    Image - Repeat property - Repeat y.png

    The image is repeated as many times as required to cover the entire background. The last image is cropped if required.

    Size: Used to define the size of the image.

    Initial size Scale to fit Scale to cover

    The image is displayed in its original size.

    Image - Size property - Initial.png

    The image is adjusted to fit the height of the background while locking its aspect ratio.

    Image - Size property - Scale to fit.png

    The image is resized to fit the the height and width of the entire background. This means that part of the image may be cropped.

    Image - Size property - Scale to cover.png

    Position (H/V): Used to define the position of the image in the background.

    • The first value defines the horizontal position of the image as regards the left, right or center.
    • The second value defines the vertical position of the image as regards the top, bottom or center.
    • If the image is repeated in the background (i.e. Repeat = repeat), then Position will have an impact on the layout of the repeated image.

Setup

Animation: Used to define the transition effects between slides in the slideshow. You can apply a Fade effect or no transition effect, i.e. Slide.

Timer Speed: This is the speed, in milliseconds, at which slides in the slideshow will advance. This defines the amount of time each slide will be displayed.

Pause On Hover: Used to define if the slideshow will automatically pause when the cursor is hovering over it (box is checked) or not (box is not checked).

Resume On Mouseout: Used to define if the slideshow will automatically resume when the cursor is no longer hovering over it (box is checked) or not (box is not checked).

Next On Click: Used to indicate if the slides in the slideshow will advance when users click the slideshow, regardless of whether the duration defined in Timer Speed has ended (box is checked) or not (box is not checked).

Animation Speed (Note: To be defined when the transition effect is Fade): Time, in milliseconds, required by the system to display each slide completely.

Stack on Small: Used to indicate if slides are stacked on top of each other in a static way (box is checked) or if they advance horizontally (box is not checked). You should use this option for displaying slideshows on devices with low screen resolutions (e.g. smartphone). Note: This option is taken into consideration for devices whose height is less than or equal to 40 em (the em unit refers to the font size).

Box is checked Box is not checked
Apps - widgets Sliding - Stack on Small On.png Apps - widgets Sliding - Stack on Small Off.png

Navigation Arrows: Used to indicate if the Previous Apps - Previous icon.png and Next Apps - Next icon.png arrows are displayed by the side of the slideshow (box is checked) or hidden (box is not checked).

Box is checked Box is not checked
Apps - widgets Sliding - Navigation Arrows On.png Apps - widgets Sliding - Navigation Arrows Off.png

Slide Number: Used to show if the slide number is visible (box is checked) or hidden (box is not checked). Note: The order number of the slide appears at the top left of the slideshow followed by the total number of slides. If the order of the slides in the slideshow is modified, then the order number of each slide will automatically be modified.

Slide Number Text: Text displayed between the order number of the current slide and the total number of slides.
         Example documentation icon EN.png  Slide Number Text: of ==> text displayed in the slideshow for slide 2: 2 of 3

Bullets: Used to indicate if bullets Apps - widget Sliding - Bullets icon.png are displayed at the bottom of the slideshow (box is checked) or not (box is not checked). Each bullet displayed represents one slide and can be used to access it directly.

Box is checked Box is not checked
Apps - widgets Sliding - Bullets On.png Apps - widgets Sliding - Bullets Off.png

Circular: Used to indicate if the slideshow will loop continuously (box is checked) or stop after the last slide (box is not checked).

Timer: Used to define if the slideshow can run in automatic mode (box is checked) or not (box is not checked). Note: When the timer is enabled, the progress bar indicating the remaining time of the slide and the Pause Apps - Pause icon.png and Resume Apps - Play icon.png buttons are displayed at the top right of the slideshow.
 

Color Of The UI Elements: Color of navigation bullets for inactive images.

Color Of The UI Elements (active): Color of the navigation bullet for the active image and color of the Previous Apps - Previous icon.png/Next Apps - Next icon.png arrows.
         Example documentation icon EN.png  Apps - widgets Sliding - Color Ui elements.png

Theme

Open url.png See the description of properties.

Procedure: How to create a slideshow

1. Click [ ADD ITEM ]. Click Apps - Upload icon.png to select the image you want.

2. Repeat this procedure for the other images in the slideshow in the order in which you want to display the slides.

  • To change the order in the Slides Image list, click and drag the slide you want to its new position using Apps - Order objects icon.png.
  • To delete a slide, click Apps - Delete icon.png.

3. Define the slideshow settings in the Setup section.

4. Switch to execute mode EVApps - GUI - Execute icon.png to view the slideshow as it will appear to users.

Tags:
Last modified by Unknown User on 2017/09/15 16:36
Created by Administrator XWiki on 2015/04/15 17:05

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018