This content has been translated automatically.  Click here  to view the French version.
  • Overview
  • Page control
  • Using an image with automatic scroll in a WEBDEV site
  • Programming an image with automatic scroll
  • Overview
  • Definition of the images to display during the scroll
  • WLanguage functions
  • WLanguage properties
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WindowsLinuxPHPWEBDEV - Browser code
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Stored procedures

Page control

The Image control with automatic scroll is used to view a set of images found in one or more site directories. The images are automatically browsed.
The change of images can be done automatically or manually (via the WLanguage functions).
Transition effects can be applied.
This allows you to easily create advertising banners or slide shows.
The automatic scroll is proposed for the following controls:
  • Image control.
  • Clickable Image control.
  • Thumbnail control.
Remark: If the different images used by the automatic scroll have different sizes, the display mode specified in the "General" tab of control is automatically applied.
Using an image with automatic scroll in a WEBDEV site
To use an image with automatic scroll in a WEBDEV site:
  1. Create an Image control.
  2. Open the control description window ("Description" in the context menu of the Image control).
  3. In the "UI" tab, "Automatic scroll" area, check "Scroll images found in a directory or programmed list" and specify the different scroll options:
    • Duration between images: indicates the time intervals for displaying the image.
    • Start automatically. If this option is not selected, the scroll can be started by ImageStartScrolling.
    • Browse image directory (General tab): This option is used to browse all the images located in the directory currently selected for the Image control (or the directory of the image currently associated with the Image control). In this case, the browse is not recursive: images located in subdirectories are not browsed.
    • Sort the content of the scroll: This option is used to display the images browsed according to their name. Select (if necessary) the browse directory of images ("Image" control.
  4. Validate the control description window.
If you have chosen an automatic startup of the scroll and a directory of images, the scroll is automatically performed during the test of the page.
Remark: Transition effects can be combined with scrolling.
Programming an image with automatic scroll


The controls proposing an automatic scroll can be handled through programming via several WLanguage properties and functions. These functions and properties are also available in browser code and in PHP.

Definition of the images to display during the scroll

The images displayed in the control during the scroll can be:
  • found in the directory selected in the control description window.
  • associated with the control through programming. Examples:
    • A list of images is associated with the control:
      // Affectation en code serveur
      IMG_Image = "chiffres_0.png" + CR + "chiffres_1.png" + CR + ...
      "chiffres_2.png" + CR + "chiffres_3.png"
    • A directory containing images is associated with the control:
      IMG_Image = "images"
      This code is used to associate a set of images or a directory with the control. The path is relative to the directory of site images (_WEB directory).

WLanguage functions

Several WLanguage functions are used to manage the images with automatic scroll. These functions are as follows:
ImageFirstDisplays the first image for the scroll.
ImageLastDisplays the last image for the scroll.
ImageNextDisplays the next image for the scroll.
ImageOccurrenceReturns the total number of images taken into account by the scroll.
ImagePreviousDisplays the previous image for the scroll.
ImageScrollingPositionReturns the displayed image.
ImageStartScrollingStarts the automatic scroll of images.
ImageStopScrollingStops the automatic scroll of images.
Example of scroll programming:
// Programmation des images du bandeau défilant.
// Possibilité de donner le répertoire des images de son choix
// Au premier affichage, choix aléatoire de la 1er photo.
// =================
// Déclaration de globale
gnNombreImagesDefilement is int
gnImageDemarrage is int
gsNomImageDefilement is string
// Initialisation de la page
<BLOCK Gestion du Bandeau défilant>
gsNomImageDefilement = fListFile(fWebDir() + fSep + "BandeauxAccueil" +
fSep + "*.jpg", frNotRecursive)
FOR EACH STRING sUnFichier OF gsNomImageDefilement SÉPARÉE BY CR
gnImageDemarrage = Random(1, gnNombreImagesDefilement)
NumImageDepartDefilement is int = gnImageDemarrage
FOR I = 1 TO NumImageDepartDefilement

WLanguage properties

Several WLanguage properties are used to manage the images with automatic scroll. These properties are as follows:
DisplayedValueReturns the path of image currently displayed.
SortedUsed to find out whether the control sorts the images during the scroll and to sort the images during the scroll.
SortOptionUsed to define the mode for sorting images during the scroll.
ValueReturns the path of image directory.
Related Examples:
The Image control (animations and transitions) Unit examples (WEBDEV): The Image control (animations and transitions)
[ + ] Presenting animation and effect features proposed in WEBDEV and WLanguage on the Image control.
Minimum version required
  • Version 16
Click [Add] to post a comment