ASPxImageZoom Class

An image zoom control.

Assembly: DevExpress.Web.v24.1.dll

Declaration

C#
VB.NET

public class ASPxImageZoom :
    ASPxWebControl,
    ISupportsImageCaching

Public Class ASPxImageZoom
    Inherits ASPxWebControl
    Implements ISupportsImageCaching

Remarks

ImageZoom_Overview

Create an ImageZoom Control

Design Time

The ASPxImageZoom control is available on the DX.24.1: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.

ASPX

<dx:ASPxImageZoom ID="imageZoom" runat="server" Width="350px" Height="350px"  
                  ImageUrl="~/Content/Images/ZoomImages/overview.jpg" ClientInstanceName="ClientImageZoom">
</dx:ASPxImageZoom>

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    ASPxImageZoom imageZoom = new ASPxImageZoom();
    imageZoom.ID = "imageZoom";
    Page.Form.Controls.Add(imageZoom);

    imageZoom.ClientInstanceName = "ClientImageZoom";
    imageZoom.ImageUrl = "~/Content/Images/ZoomImages/overview.jpg";
    imageZoom.Width = 350;
    imageZoom.Height = 350;
}

Imports DevExpress.Web

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim imageZoom As ASPxImageZoom = New ASPxImageZoom()
    imageZoom.ID = "imageZoom"
    Page.Form.Controls.Add(imageZoom)

    imageZoom.ClientInstanceName = "ClientImageZoom"
    imageZoom.ImageUrl = "~/Content/Images/ZoomImages/overview.jpg"
    imageZoom.Width = 350
    imageZoom.Height = 350
End Sub

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

The ASPxImageZoom class provides you with the ability to display images in high-res detail. The ASPxImageZoom control combines two image zoom effects. Hovering over the image displays a zoomed area (controlled by the ASPxImageZoom.EnableZoomMode property), a click on the image enlarges it in a full-screen popup (controlled by the ASPxImageZoom.EnableExpandMode property).

To specify an image displayed in preview area, use the ASPxImageZoom.ImageUrl property. The image displayed in the zoom window and the expand window is specified by the ASPxImageZoom.LargeImageUrl property.

You can supplement the image zoom with the image navigation functionality. For this purpose, link an ASPxImageZoom object to an ASPxImageZoomNavigator object using the ASPxImageZoom.AssociatedImageZoomNavigatorID property.

Note

ASPxImageZoom control provides you with a comprehensive client-side functionality implemented using JavaScript code.

The control’s client-side equivalent is represented by the ASPxClientImageZoom object.
On the client side, the client object can be accessed directly by the name specified by the ASPxImageZoom.ClientInstanceName property.
The available client events can be accessed by using the ASPxImageZoom.ClientSideEvents property.

The control’s client-side API is enabled if the ASPxImageZoom.ClientInstanceName property is defined or any client event is handled.