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 / Thumbnail control
  • Overview of the Thumbnail control
  • Creating a Thumbnail control
  • Creating a Thumbnail control
  • Describing a Thumbnail control
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
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 line of code 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: Allows you to specify the path to the large-format image associated with the Thumbnail control field.. 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 lets you choose where the original image should be displayed when the thumbnail is clicked (new browser tab by default)..
      Several destinations allow specific display of the thumbnail image:
      • Automatic Popup: the thumbnail image is displayed as a popup on the page (the page background is grayed out).. 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 the thumbnail control is modified, a transition can be selected, such as Fade, Overlay or Sweep, to make the image change more harmonious.. For more details, see Animating an image.
  • Automatic dequeue: This option is only available for "dynamic" or "from a database: path" images.. For more details, see Image with automatic scroll.
"Detail "tab :
  • Delayed loading: The "Load the image when the control is on the screen" option delays image loading. 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 it 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 displays the original image in a popup window when the thumbnail is hovered over.. You can choose:
    • Automatic Popup: the thumbnail image is displayed as a popup on the page (the page background is grayed out).. 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 allows you to manipulate the field using indirections.. For more details, see Indirection operators.
    • Disable image save option in the browser context menu: If this option is checked, the thumbnail context menu cannot be displayed in the browser.. Some operations for handling the thumbnail on the browser (save, print, etc.) will not be available.
      Warning: only the thumbnail image is protected. The image opened in the new browser is not protected. The context menu of this image will be displayed.
  • Compatibility with previous versions: These options reproduce the image configuration options available in version 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 Choose the type of image: dynamic, static, generated, ....
Minimum version required
  • Version 10
Comments
Click [Add] to post a comment

Last update: 09/30/2024

Send a report | Local help