PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | French EN
  • Overview of the Thumbnail control
  • Creating a Thumbnail control
  • Creating a Thumbnail control
  • Describing a Thumbnail control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of the Thumbnail control
The Thumbnail control is used to automatically manage the display of images in thumbnail format.
During a click on the thumbnail, the initial image will be automatically displayed:
  • in a new window of the browser or in a tab of the browser (according to the configuration of the browser).
  • Versions 16 and later
    as a popup (automatic or in an Image control of a cell).
    New in version 16
    as a popup (automatic or in an Image control of a cell).
    as a popup (automatic or in an Image control of a cell).
No code line is required.
This type of control simplifies the creation of "Catalog" pages.
Versions 15 and later
PHP The Thumbnail control is available in PHP.
New in version 15
PHP The Thumbnail control is available in PHP.
PHP The Thumbnail control is available in PHP.
Creating a Thumbnail control

Creating a Thumbnail control

To create a Thumbnail control:
  1. On the "Creation" pane, in the "Usual controls" group, expand "Image" and select "Thumbnails".
  2. Click where you want to create the control in the page. The control is automatically created.
To display the control characteristics, select "Description" in the control popup menu.

Describing a Thumbnail control

The main characteristics of a Thumbnail control are as follows. These characteristics are found in the different tabs of the control description window.
"General" tab:
  • Image source:
    • Image: Used to specify the path of the large-size image associated with the Thumbnail control. This image will be automatically displayed when a click is performed on the thumbnail.
    • Thumbnail. Used to specify the path of the image that will be used as thumbnail. This allows you to display an image that differs from the source image in the Thumbnail control. If this control is not filled, the image of the thumbnail is automatically generated by WEBDEV from the source image.
  • Display parameters:
    • Display mode. See Choosing the image display mode for more details. Only the "Homothetic centered" and "Stretched" modes are available.
    • Transparency. See Choosing the image display mode for more details.
    • Large format display: This option allows you to choose the location where the initial image must be displayed during a click on the thumbnail (new browser tab by default).
      Several destinations can be defined for a specific display of thumbnail image:
      • Automatic popup: the thumbnail image is displayed in popup format in the page (the page background is grayed). The style of automatic popup can be defined in the "Style" tab of Thumbnail control ("Automatic popup" element).
      • Custom popup:
        • if your page contains a cell and an Image control in the cell, you have the ability to display the image in this cell. To do so, select the name of the cell and the name of the Image control. The image of the thumbnail is displayed in the cell as popup in the page (the page background is grayed).
        • if your page contains a popup and an Image control in the popup, you have the ability to display the image in this popup. To do so, select the name of popup and Image control. The thumbnail image is displayed in the Image control of popup.
"UI" tab:
  • Transition: When the value of thumbnail control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
  • Automatic scroll: This option is available for "dynamic" images or images "from a database: path". See Image with automatic scroll for more details.
"Details" tab:
  • Delayed loading: The "Load the image when the control is on the screen" option is used to delay the loading of the image. Indeed, when a browser performs the rendering of a page, it loads the page and its images from the server. This load time may be quite long in some cases. This option allows the browser to load the image only when this one is displayed in the visible page section. You also have the ability to specify the wait image, used during the delayed image load.
  • Zoom on hover: This option is used to display the initial image in a popup when hovering over the thumbnail. You can select:
    • Automatic popup: the thumbnail image is displayed in popup format in the page (the page background is grayed). The style of automatic popup can be defined in the "Style" tab of Thumbnail control ("Automatic popup" element).
    • Custom popup:
      • if your page contains a cell and an Image control in the cell, you have the ability to display the image in this cell. To do so, select the name of the cell and the name of the Image control. The image of the thumbnail is displayed in the cell as popup in the page (the page background is grayed).
      • if your page contains a popup and an Image control in the popup, you have the ability to display the image in this popup. To do so, select the name of popup and Image control. The thumbnail image is displayed in the Image control of popup.
    See Zoom on an image for more details.
  • Options:
    • Allow indirections (slows the execution down): This option makes it possible to handle the control via indirections. See Indirection operators for more details.
    • Disable image backup in the browser popup menu: If this option is checked, the popup menu of the thumbnail will not be displayed in the browser. Some operations for handling the thumbnail on the browser(backup, print, etc.) will not be available.
      Caution: Only the image displayed as thumbnail is protected. The image opened in the new browser is not protected. The popup menu of this image will be displayed.
  • Compatibility with the earlier versions: These options retrieve the configuration options of the images available in versions 23 and earlier. These options are available for compatibility. Now, the type of image is automatically detected. For more details on options available for compatibility, see Choosing the type of image: dynamic, static, generated, ....
Minimum version required
  • Version 10
Comments
Click [Add] to post a comment