ImageZoom
- 2 minutes to read
#Image Zoom (Overview)
ImageZoom is an extension that provides you with the capability to display images in high-res detail. ImageZoom combines two image zoom effects. Hovering over the image displays a zoomed area, a clicking on the image enlarges it to a full-screen popup.
To see the ImageZoom in action, refer to its online demos.
#Implementation Details
The ImageZoom is implemented by the ImageZoomExtension class. To access its instance, use the ExtensionsFactory.ImageZoom helper method, which is used to add an ImageZoom extension to a view. This method’s parameter provides access to ImageZoom settings implemented by the ImageZoomSettings class.
#Declaration
The code sample below demonstrates how to add an ImageZoom to a project.
@Html.DevExpress().ImageZoom( settings => {
settings.Name = "imageZoom";
settings.ImageUrl = Url.Content("~/Content/ImageZoom/my_image.jpg");
settings.LargeImageUrl = Url.Content("~/Content/ImageZoom/my_image_large.jpg");
}).GetHtml()
Note
The Partial View should contain only the extension’s code.
The code result is demonstrated by the image below.
#Image Zoom Navigator (Overview)
ImageZoomNavigator is a data extension that displays a set of thumbnails. Clicking a thumbnail opens a corresponding image within an associated ImageZoom extension.
To see the ImageZoomNavigator in action, refer to its online demo.
#Implementation Details
The ImageZoomNavigator is implemented by the ImageZoomNavigatorExtension class. To access its instance, use the ExtensionsFactory.ImageZoomNavigator helper method, which is used to add an ImageZoomNavigator extension to a view. This method’s parameter provides access to ImageZoomNavigator settings implemented by the ImageZoomNavigatorSettings class.
The ImageZoomNavigator‘s client counterpart is represented by the ASPxClientImageZoomNavigator object.
#Declaration
The code sample below demonstrates how to add an ImageZoom and ImageZoomNavigator to a project.
<div style="float: left;">
@Html.DevExpress().ImageZoom(settings => {
settings.Name = "imageZoom";
settings.AssociatedImageZoomNavigatorName = "zoomNavigator";
}).GetHtml()
<div style="margin-top: 10px;">
@Html.DevExpress().ImageZoomNavigator(settings => {
settings.Name = "zoomNavigator";
settings.SettingsAutoGeneratedImages.ImageHeight = Unit.Pixel(350);
settings.SettingsAutoGeneratedImages.ImageWidth = Unit.Pixel(350);
settings.SettingsAutoGeneratedImages.LargeImageHeight = Unit.Pixel(900);
settings.SettingsAutoGeneratedImages.LargeImageWidth = Unit.Pixel(900);
settings.SettingsAutoGeneratedImages.ThumbnailHeight = Unit.Pixel(75);
settings.SettingsAutoGeneratedImages.ThumbnailWidth = Unit.Pixel(75);
settings.SettingsAutoGeneratedImages.ImageCacheFolder = "~/Thumb/";
settings.Styles.Thumbnail.ImageHeight = Unit.Pixel(75);
settings.Styles.Thumbnail.ImageWidth = Unit.Pixel(75);
}).BindToFolder("~/Content/ImageZoom/shoes/").GetHtml()
</div>
</div>
Note
The Partial View should contain only the extension’s code.
The code result is demonstrated by the image below.