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
  • Automatic zoom of an image in a popup
  • Automatic zoom in an Image control found in a cell or in a popup
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
WEBDEV proposes several methods for zooming an image:
Automatic zoom of an image in a popup
To perform an automatic zoom of an image in a popup:
  1. If needed, create an Image, Clickable Image or Thumbnail control. This control contains the image to zoom.
  2. Go to the "Details" tab of the Image control description window.
  3. In the "Zoom on hover" section, specify:
    • Display mode: "Zoom in an Automation popup"..
    • the popup position. This position is relative to the Image control. The possible options are: Top, Bottom, Left, Right.
    • the zoom factor to apply.
  4. Validate. The popup area appears in dotted lines in the page editor. This area can be resized if necessary. Warning: If the zone cannot be displayed in its entirety at the position indicated, the WEBDEV engine may move it in execution..
Automatic zoom in an Image control found in a cell or in a popup
In the previous method, the zoom of the image is performed in a popup that is necessarily "stuck" to the initial image. In some cases, it may be interesting to leave a space between the initial image and the zoom.
To perform an automatic zoom of an image in a cell:
  1. If needed, create an Image, Clickable Image or Thumbnail control. This control contains the image to zoom.
  2. Create a cell and insert a new Image control into this cell.
    Remarks:
    • This cell can be created at any position in the page.
    • The cell must be stackable (check "The control can be stacked" in the "UI" tab of the cell description window).
    • The space found between the outline of the cell and the outline of the Image control defines the space between the initial image and the image of the zoom.
  3. Go to the "Details" tab of the Image control description window (control containing the image to zoom).
  4. In the "Zoom on hover" section, specify:
    • Display mode: "Zoom in a customized popup".. Specify the cell and the image to use (WEBDEV proposes the elements found in the page).
    • the popup position. This position is relative to the Image control. The possible options are: Top, Bottom, Left, Right.
    • the zoom factor to apply.
  5. Validate.
To perform a zoom of an image in a popup:
  1. If needed, create an Image, Clickable Image or Thumbnail control. This control contains the image to zoom.
    Remarks:
    • The display mode of image must be "100%" ("General" tab).
    • The overflow must be invisible ("Style" tab).
  2. Create a popup:
    • On the "Creation" tab, in the "Containers" group, click "Popup".
    • Give a name to this popup and save it.
  3. Create an Image field in the popup: under the "Creation" pane, in the "Usual controls" group, click on "Image"..
    Note: The space between the outline of the popup and the outline of the image field determines the space between the original image and the zoom image.
  4. Go to the "Details" tab of the Image control description window (control containing the image to zoom).
  5. In the "Automatic zoom" area, specify:
    • Display mode: "Zoom in a customized popup".. Specify the popup and the image to use (WEBDEV proposes the elements found in the page).
    • the popup position. This position is relative to the Image control. The possible options are: Top, Bottom, Left, Right.
    • the zoom factor to apply.
  6. Validate.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment

Last update: 07/18/2024

Send a report | Local help