PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English 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/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
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).
    Versions 27 and later
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    New in version 27
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    Simply click the "X" icon to close this popup.To close this popup, you can:
    • use the "X" icon,
    • Versions 27 and later
      press Esc,
      New in version 27
      press Esc,
      press Esc,
    • Versions 27 and later
      click outside the popup.
      New in version 27
      click outside the popup.
      click outside the popup.
    New in version 16
    as a popup (automatic or in an Image control of a cell).
    Versions 27 and later
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    New in version 27
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    Simply click the "X" icon to close this popup.To close this popup, you can:
    • use the "X" icon,
    • Versions 27 and later
      press Esc,
      New in version 27
      press Esc,
      press Esc,
    • Versions 27 and later
      click outside the popup.
      New in version 27
      click outside the popup.
      click outside the popup.
    as a popup (automatic or in an Image control of a cell).
    Versions 27 and later
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    New in version 27
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    Simply click the "X" icon to close this popup.To close this popup, you can:
    • use the "X" icon,
    • Versions 27 and later
      press Esc,
      New in version 27
      press Esc,
      press Esc,
    • Versions 27 and later
      click outside the popup.
      New in version 27
      click outside the popup.
      click outside the popup.
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" tab, 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 view the control characteristics, select "Description" in the context 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 settings:
    • Display mode. For more details, see Choosing the image display mode. Only the "Homothetic centered" and "Stretched" modes are available.
    • Transparency. For more details, see Choosing the image display mode.
    • 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. For more details, see Animating an image.
  • Automatic scroll: This option is available for "dynamic" images or images "from a database: path". For more details, see Image with automatic scroll.
"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.
    For more details, see Zoom on an image.
  • Options:
    • Allow indirections (slows the execution down): This option makes it possible to handle the control via indirections. For more details, see Indirection operators.
    • 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