ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image control
  • Overview
  • Page control
  • Using an image with automatic sequence in a WEBDEV site
  • Programming an image with automatic sequence
  • Overview
  • Definition of images to be displayed in the sequence
  • 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

Image controls with automatic sequence are used to view a series of images located 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 sequence is available for the following controls:
  • Image control.
  • Clickable Image control.
  • Thumbnail control.
Remark: If the different images used by the automatic sequence have different sizes, the display mode specified in the "General" tab of control is automatically applied.
Using an image with automatic sequence in a WEBDEV site
To use an image with automatic sequence 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 sequence", check "Scroll images found in a directory or programmed list" and specify the different sequence options:
    • Duration between images: indicates the time intervals for displaying the image.
    • Start automatically. If this option is not selected, the sequence 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 set the sequence to start automatically and specified an image directory, the sequence will start automatically when testing the page.
Remark: Transition effects can be combined with sequence.
Programming an image with automatic sequence

Overview

The controls with an automatic sequence can be handled programmatically via several WLanguage properties and functions. These functions and properties are also available in browser code and in PHP.

Definition of images to be displayed in the sequence

The images displayed in the control during the sequence 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 handle the images in an automatic sequence. 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 cycling through images.
ImageStopScrollingStops the automatic image sliding.
Sequence programming:
// Program images in the sliding banner.
// Ability to specify the image directory
// The first time, the first image is selected at random.
// =================
// Declaration of global variables
gnNumberSlideImages is int
gnStartingImage is int
gsSlideImageName is string
 
// Page initialization
<BLOCK Sliding Banner>
gsSlideImageName = fListFile(fWebDir() + fSep + "Home banner" +
fSep + "*.jpg", frNotRecursive)
FOR EACH STRING sAFile OF gsSlideImageName SEPARATED BY CR
gnNumberSlideImages++
END
InitRandom()
gnStartingImage = Random(1, gnNumberSlideImages)
 
NumSlideStartingImage is int = gnStartingImage
 
FOR I = 1 TO NumSlideStartingImage
ImageNext(IMG_Overview)
END
ImageStartScrolling(IMG_Overview)
<END>

WLanguage properties

Several WLanguage properties are used to handle the images in an automatic sequence. These properties are as follows:
DisplayedValueReturns the path of image currently displayed.
SortedDetermines whether the control sorts the images during the sequence and sorts the images.
SortOptionUsed to define image sorting mode for the sequence.
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: 06/22/2023

Send a report | Local help