<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type = "text/javascript">
$('[id*=imgItem]').live("click", function () {
$("#desc").html($(this).attr("title"));
$("#dialog").dialog({
title: "Item Description",
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Desc") %>'></asp:Label>
<asp:Image ID="imgItem" ImageUrl='<%#Eval("Url") %>' runat="server"
ToolTip='<%# Eval("Desc") %>' style = "cursor:pointer" />
</ItemTemplate>
</asp:DataList>
<div id="dialog" style="display:none">
Description: <span id = "desc"></span>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Desc"), new DataColumn("Url") });
dt.Rows.Add("Image 1", "http://www.aspforums.net/Avatars/Mudassar.jpg");
dt.Rows.Add("Image 2", "http://www.aspforums.net/Avatars/Mudassar.jpg");
DataList1.DataSource = dt;
DataList1.DataBind();
}
}
