Zoom

The Zoom control represents an image zoom tool.

Server side

Customizing the control

Two images (a thumbnail and a full-sized image) should be specified for the Zoom control. Use the ImageUrl property to specify the thumbnail image and the ZoomImageUrl property to specify the full-sized image.

Set the ShowFullSize property to specify whether the control should display the full-sized image when clicked.

Use the PopupWidth, PopupHeight, PopupAlignRight and PopupAlignTop properties to adjust the zoom pop-up according to your needs. You can apply custom styling to the pop-up and the zoom tracker rectangle by setting the PopupCssClass and TrackerCssClass properties respectively.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var zoom = $find("Zoom1");
var zoom = $find("<%= Zoom1.ClientID %>");

Events

The following client-side event are exposed by the Zoom class.

Event	Event arguments	Script property	Description
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
popupOpen	PopupEventArgs	PopupOpenScript	Raised when the control's popup is opened.
popupClose	PopupEventArgs	PopupCloseScript	Raised when the control's popup is closed.
popupOpening	PopupEventArgs	PopupOpeningScript	Raised when the control's popup is about to be opened.
popupClosing	PopupEventArgs	PopupClosingScript	Raised when the control's popup is about to be closed.