Skip to main content

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.

ImageZoom-overview.png

#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.

MVC_ImageZoomNavigator_Overview