Displaying Full Sized Image on Click or Hover

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 29 Dec 2014 Link to this post

    Requirements

    Telerik Product and Version

    		 -

    Supported Browsers and Platforms

    		 -

    Components/Widgets used (JS frameworks, etc.)

    		 -

    Project Description

    This Code Library demonstrates several options for displaying full sized image on click or hover:
    Zoom manager

    As you will notice in the attached page, it is really easy to integrate this technique with RadGrid or any other control.

    Implementation

    In order to attach zoom handler for any image on your page, you only need to include the imageZoom.js file in your project, get reference to the target image and call the ZoomManager.applyZoom(imageElement, zoomType) method.

    There are 3 different zoom types that could be used:
    • Toggle
    • ToolTip
    • Telescope

    In the context of RadBinaryImage you can handle the client-side pageLoad event and use the following:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                ZoomManager.applyZoom(document.getElementById("<%=RadBinaryImage3.ClientID%>"), "telescope");
            }
        </script>
    </telerik:RadCodeBlock>


    Customization

    When ToolTip and Telescope zoom types are used, a fullSizeImageWrapper class is added to the wrapping DIV element and the fullSizeImage class is added to the generated IMG element. You can use those class names for customizing both - the image and the wrapping DIV element.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.