New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Image Gallery

Customer picture
Customer picture
Customer picture
Customer picture
Customer picture
Customer picture

This example demonstrates how to organize an image gallery by using the RadToolTipManager control. The full size image is loaded in a tooltip and it has to be shown centered on the screen. However, when  each tooltip's content is with different size, the tooltip initially shows centered but after that it resizes itself according to the content's size and does not stay at the center.

You can avoid this side effect by cancelling the tooltip's show and then dynamically set its content before showing it again:

var currentTooltip = null; function OnClientBeforeShow(sender, args)
{
    //Hide the currently visible tooltip
    if (currentTooltip)
    {
        if (currentTooltip != sender) currentTooltip.hide();
            return;
    }
 
    currentTooltip = sender; args.set_cancel(true);
}
 
function centerTooltip(img)
{
    if (currentTooltip)
    {
        currentTooltip.set_contentElement(img);
             
        //use the method updateLocation because it does not call WebService's method which loads the content
        currentTooltip.updateLocation();
        currentTooltip = null;
    }
}

The full size image is taken by using a WebService which WebMethod returns an image which executes the centerToolTip function when loaded:

[WebMethod]
.......................................
 
Image img = new Image();
img.ImageUrl = String.Format("~/Tooltip/Img/Northwind/Flowers/{0}.jpg", imageID);
img.Attributes["onload"] = "centerTooltip(this);this.onload = null;";
 
........................................
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • ToolTipWebService.vb
  • scripts.js
  • Styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.ImageGallery.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="styles.css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Position="center"
        RelativeTo="BrowserWindow" OnClientBeforeShow="telerikDemo.onClientBeforeShow">
        <WebServiceSettings Method="GetFullSizeImage" Path="ToolTipWebService.asmx"></WebServiceSettings>
    </telerik:RadToolTipManager>
    <div class="demo-container no-bg">
        <div class="wrapper">
            <asp:Repeater runat="server" ID="itemsRepeater" OnItemDataBound="ItemsRepeater_ItemDataBound">
                <ItemTemplate>
                    <div class="imageFrame">
                        <asp:Image runat="server" ID="Image" ImageUrl='<%# String.Format("~/Tooltip/images/Flowers/Thumbs/{0}.jpg", Container.DataItem) %>'
                            Style="border: solid 1px #e3d7c0;" AlternateText="Customer picture"></asp:Image>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance