ASPxImageZoomNavigator Class

An image zoom navigator control.

Assembly : DevExpress.Web.v25.2.dll

Declaration

C#
VB.NET

csharp

public class ASPxImageZoomNavigator :
    ASPxImageSliderBase,
    IControlDesigner

Public Class ASPxImageZoomNavigator
    Inherits ASPxImageSliderBase
    Implements IControlDesigner

Remarks

ASPxImageZoomNavigator is a data control that displays a set of thumbnails. Clicking (or hovering based on the ASPxImageZoomNavigator.ActiveItemChangeAction property value) a thumbnail opens a corresponding image in an associated ASPxImageZoom control (ASPxImageZoom.AssociatedImageZoomNavigatorID).

Create an ImageZoomNavigator Control

Design Time

The ASPxImageZoomNavigator control is available on the DX.25.2: 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

aspx

<dx:ASPxImageZoom ID="imageZoom" ClientInstanceName="ClientImageZoom" runat="server" AssociatedImageZoomNavigatorID="zoomNavigator" />

<dx:ASPxImageZoomNavigator ID="zoomNavigator" runat="server" ImageSourceFolder="~/Content/Images/ZoomImages/shoes/" ClientInstanceName="ClientZoomNavigator">
    <SettingsAutoGeneratedImages 
        ImageHeight="350" ImageWidth="350" LargeImageHeight="900" LargeImageWidth="900" ImageCacheFolder="~/Thumb/" />
</dx:ASPxImageZoomNavigator>

csharp

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

    ASPxImageZoomNavigator zoomNavigator = new ASPxImageZoomNavigator();
    zoomNavigator.ID = "zoomNavigator";
    Page.Form.Controls.Add(zoomNavigator);

    zoomavigator.ClientInstanceName = "ClientZoomNavigator";
    zoomNavigator.ImageSourceFolder = "~/Content/Images/ZoomImages/shoes/";
    zoomNavigator.SettingsAutoGeneratedImages.ImageHeight = 350;
    zoomNavigator.SettingsAutoGeneratedImages.ImageWidth = 350;
    zoomNavigator.SettingsAutoGeneratedImages.LargeImageHeight = 900;
    zoomNavigator.SettingsAutoGeneratedImages.LargeImageWidth = 900;
    zoomNavigator.SettingsAutoGeneratedImages.ImageCacheFolder = "~/Thumb/";
}

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.AssociatedImageZoomNavigatorID = "zoomNavigator"
    imageZoom.ClientInstanceName = "ClientImageZoom";

    Dim zoomNavigator As ASPxImageZoomNavigator = New ASPxImageZoomNavigator()
    zoomNavigator.ID = "zoomNavigator"
    Page.Form.Controls.Add(zoomNavigator)

    zoomavigator.ClientInstanceName = "ClientZoomNavigator"
    zoomNavigator.ImageSourceFolder = "~/Content/Images/ZoomImages/shoes/"
    zoomNavigator.SettingsAutoGeneratedImages.ImageHeight = 350
    zoomNavigator.SettingsAutoGeneratedImages.ImageWidth = 350
    zoomNavigator.SettingsAutoGeneratedImages.LargeImageHeight = 900
    zoomNavigator.SettingsAutoGeneratedImages.LargeImageWidth = 900
    zoomNavigator.SettingsAutoGeneratedImages.ImageCacheFolder = "~/Thumb/"
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 number of thumbnails displayed in an ASPxImageZoomNavigator object is controlled by the ASPxImageZoomNavigator.VisibleItemCount property. The thumbnails can be ordered in a horizontal or vertical direction based on the ASPxImageZoomNavigator.Orientation property value.

Images displayed by the ASPxImageZoomNavigator control can be defined in the ASPxImageZoomNavigator.Items collection. Additionally, the control can be populated with item information taken from a data source that can be specified by using either of the following properties.

ASPxDataWebControlBase.DataSource to programmatically supply a data object.
ASPxDataWebControl.DataSourceID to define a declarative data source.

When the ASPxImageZoomNavigator control is bound to a data source, an ImageZoomNavigatorItem object is created automatically for every recognized data item. Individual item characteristics (such as text, image path, and thumbnail path) are obtained from the data fields (item attributes) of the corresponding data items. The ASPxImageZoomNavigator exposes its specific data-related properties, allowing you to specify which data source fields the item information should be retrieved from.

Member	Description
ASPxImageZoomNavigator.ImageUrlField	Gets or sets the name of a data field (or an xml element’s attribute) which provides items’ image locations.
ASPxImageZoomNavigator.LargeImageUrlField	Gets or sets the name of a data field (or an xml element’s attribute) which provides items’ large image locations.
ASPxImageZoomNavigator.ThumbnailUrlField	Gets or sets the name of a data field (or an xml element’s attribute) which provides items’ thumbnail image locations.
ASPxImageZoomNavigator.ImageContentBytesField	Gets or sets the data source field which provides items’ binary images.
ASPxImageZoomNavigator.ExpandWindowTextField	Gets or sets the name of a data field (or an xml element’s attribute) which provides the items’ expand window texts.
ASPxImageZoomNavigator.ZoomWindowTextField	Gets or sets the name of a data field (or an xml element’s attribute) which provides items’ zoom window texts.

Note

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

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

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