ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

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
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
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:
    • the display mode: "Zoom in an automatic popup".
    • the popup position. This position is relative to the Image control. The available options are: Above, Below, To left, To 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. Caution: If the area cannot be entirely displayed at the specified position, it will be moved by the WEBDEV engine at runtime.
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:
    • the display mode: "Zoom in a custom 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 available options are: Above, Below, To left, To 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 control in the popup: on the "Creation" tab, in the "Usual controls" group, click "Image".
    Remark: The space found between the outline of the popup and the outline of the Image control defines the space between the initial image and the image of the zoom.
  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:
    • the display mode: "Zoom in a custom 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 available options are: Above, Below, To left, To right.
    • the zoom factor to apply.
  6. Validate.
Related Examples:
eBusiness Complete examples (WEBDEV): eBusiness
[ + ] The eBusiness project is a full eBusiness site that can be entirely customized via a Web management interface.
- The showroom/payment section of the site is developed in AWP in order to get the best possible referencing of products.
- The management section of the site is developed in standard WD session to guarantee the maximum security.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment

Last update: 07/12/2022

Send a report | Local help