- Overview
- Automatic zoom of an image in a popup
- Automatic zoom in an Image control found in a cell or in a popup
Zooming an image (WEBDEV)
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: - If needed, create an Image, Clickable Image or Thumbnail control. This control contains the image to zoom.
- Go to the "Details" tab of the Image control description window.
- 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.
- 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: - If needed, create an Image, Clickable Image or Thumbnail control. This control contains the image to zoom.
- 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.
- Go to the "Details" tab of the Image control description window (control containing the image to zoom).
- 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.
- Validate.
To perform a zoom of an image in a popup: - 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).
- Create a popup:
- On the "Creation" tab, in the "Containers" group, click "Popup".
- Give a name to this popup and save it.
- 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. - Go to the "Details" tab of the Image control description window (control containing the image to zoom).
- 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.
- Validate.
Related Examples:
|
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.
|
|
|
|
|