THEMES
THEME SETTINGS

Image and Data Navigation - Image Zoom Overview

About the Image Zoom

The DevExpress ASP.NET MVC ImageZoom extension provides you with the ability to display images in high-res detail. ImageZoom combines two image zoom effects. Hovering over the image displays a zoomed area, a click on the image enlarges it in a full-screen popup.

The code sample below demonstrates how to add the ImageZoom extension to your project and specify small and large images to be displayed in the extension.

View code:

@Html.DevExpress().ImageZoom( settings => {
    settings.Name = "imageZoom";
    settings.ImageUrl = Url.Content("~/Content/ImageZoom/Shoes.jpg");
}).GetHtml()

Key Features
  • Zoom Window Position and Size
    The Zoom Window can be displayed at any side (right, bottom, left, top) of the image. You can also change the size of the Zoomed Window. Note that in this case, the mouse box (the square area under the cursor) automatically changes its size as well.
  • Zoom Inside the Image
    The Zoom Window can be displayed within the image borders so that you can zoom inside the image.
  • Hint
    A hint can be displayed over the image to indicate that the image is zoomable. The hint can be text or an image or both.
  • Zoom and Expand Window Captions
    Provide individual text descriptions to be displayed within the expression's Zoom and Expand Windows.
  • Image Zoom Navigator
    A data-bound navigation bar that allows you to display images within the assigned ImageZoom extension.
Version: v2016 vol 2.4
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.