PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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. Display the "Details" tab of the description window of the Image control.
  3. In the "Automatic zoom" area, 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 run time.
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.
    Notes:
    • This cell can be created anywhere in the page.
    • The cell must be stackable ("The control can be stacked" checked in the "GUI" tab of the description window of the cell).
    • 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. Display the "Details" tab of the description window of the Image control (control containing the image to zoom).
  4. In the "Automatic zoom" area, 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.
    Notes:
    • The display mode of the image must be "100%" ("General" tab).
    • The overflow must be invisible ("Style" tab).
  2. Create a popup (select "Insert .. Popup" for example). Give a name to this popup and save it.Create a popup:
    • On the "Creation" pane, in the "Containers" group, click "Popup".
    • Give a name to this popup and save it.
  3. Create an Image control in the popup ("Insert .. Control .. Image").Create an Image control in the popup: on the "Creation" pane, in the "Usual controls" group, click "Image".
    Note: 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. Display the "Details" tab of the description window of the Image control (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 required version
  • Version 17
Comments
Click [Add] to post a comment