Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
Table of Contents
Advanced Features

Overview

This topic covers the following advance features:

Background Shadow

Effect

Positioning Mode

Custom Zoom Out Panel

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:

HTML
Copy 
<h1>Advanced Features</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:

HTML
Copy 
<h1>Advanced Features</h1>
<div>{var:big_image}</div>

This template displays the description on top of the image:

HTML
Copy 
<div>{var:description}</div>
<div>{var:big_image}</div>