ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Thumbnail control
  • 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).
  • as a popup (automatic or in an Image control of a cell).
    The popup is resized along with the browser, and a transition is automatically used when the popup is displayed.
    This popup has the following features:
    • Ability to close by clicking outside the window, by pressing Esc or by clicking the Close icon.
    • Toolbar with fade-in, fade-out and hover effects, with rotation and zoom buttons
    • Rotation in 90-degree increments.
    • 2.5x zoom with the mouse wheel.
    • Zoom in 100% increments.
    • Ability to drag and drop the image.
No code line is required.
This type of control simplifies the creation of "Catalog" pages.
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, simply select the name of the popup and the 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, simply select the name of the popup and the 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 save option in the browser context menu: If this option is checked, the context menu of the thumbnail will not be displayed in the browser. Some operations for handling the thumbnail on the browser (save, 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 context menu of this image will be displayed.
  • Compatibility with 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

Last update: 07/12/2022

Send a report | Local help