Displaying Full Sized Image on Click or Hover

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 29 Dec 2014 Link to this post


    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.


    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");


    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