ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Controls (window/page/report) / Controls / Image control
  • 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
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview

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

Overview

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:
      // Assignment in server code
      IMG_Image = "digits_0.png" + CR + "digits_1.png" + CR +  ...
      "digits_2.png" + CR + "digits_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:
ImageStopScrollingStops the automatic scroll of images.
ImageLastDisplays the last image for the scroll.
ImageStartScrollingStarts the automatic scroll of images.
ImageOccurrenceReturns the total number of images taken into account by the scroll.
ImageScrollingPositionReturns the displayed image.
ImagePreviousDisplays the previous image for the scroll.
ImageFirstDisplays the first image for the scroll.
ImageNextDisplays the next image for the scroll.

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
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help