ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
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
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
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.
Note: If the different images used by the automation dequeue have different sizes, the display mode specified in the "General" tab of the field is automatically applied..
Using an image with automatic sequence in a WEBDEV site
To use an image with automatic scroll in a WEBDEV website:
  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, in the "Automatic scrolling" area, check the "Scroll images found in a directory or programmed list" option, then specify the various scrolling options:
    • Duration between images: indicates image display delay..
    • Start automatically. If this option is not selected, the sequence can be started by ImageStartScrolling.
    • Browse image directory (General tab): This option allows you to browse all images present in the directory currently selected for the Image field (or the directory of the image currently associated with the Image field).. In this case, the path is not recursive: sub-directory images are not browsed..
    • Sort the content of the scroll: This option displays browsed images by 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.
Note: It is possible to combine transition effects with.
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:
      // 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 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.
Example of scroll 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: 09/19/2024

Send a report | Local help