Overview
This topic covers the following advance features:
Background Shadow
EO.Web ImageZoom can display a background shadow when the image is zoomed out.
To use this feature, simply set the ImageZoom control's
BackShadeColor and
BackShadeOpacity.
Effect
EO.Web ImageZoom supports zoom in/zoom out or fade in/fade out effect.
The default effect is zoom in/zoom out. You can change the effect to
fade in/fade out by setting
EffectType to
Fade.
The duration of the effect can be customized through
EffectDuration.
This property specifies the effect duration in millisecond.
Positioning Mode
By default, the big image is displayed at the center of the browser
window. You can customize the horizontal location and vertical
location of the big image independently by setting
PositionX and
PositionY to
one of the following value:
| Value |
Remarks |
|
ImageZoomPosition.ScreenCenter
|
This is the default value. The zoomed in image
is placed at the center of the browser window.
|
|
ImageZoomPosition.ImageCenter
|
The center of the zoomed in image (big image) is
aligned to the center of the small image.
|
|
ImageZoomPosition.Relative
|
The zoomed in image (big image) is placed relative
to the position of the small image. You would
usually also set
OffsetX and
OffsetY
when using this option.
|
Custom Zoom Out Panel
The layout of the zoom out panel can be customized through
ZoomPanelTemplate
property.
Note: ZoomPanelTemplate is a ClientTemplate,
which is an unique feature of EO.Web Controls and it is not the same as regular ASP.NET
server template.
ZoomPanelTemplate recongizes two "variables": "big_image" and "description".
To customize zoom out panel template, you supply a HTML snippet that would serve
as the content of the zoom out panel, while embed these two "variables" as
place holders for the big image and description respectively. For example:
<h1>Here is the big image!</h1>
<div>{var:big_image}</div>
<div>{var:description}</div>
When ImageZoom zooms in, it fills the zoom out panel with the given HTML but replaces
the two "variables" with big image and description. The following sample displays the
image only:
<h1>Here is the big image!</h1>
<div>{var:big_image}</div>
This template displays the description on top of the image:
<div>{var:description}</div>
<div>{var:big_image}</div>