Example:
On Client Side:
<table align="center" width="100%">
<tr>
<td align="center" width="100%">
<table align="center" width="100%" style="background-color: #ffffff; border: 0; margin-left: -5;">
<tr id="trRotator" runat="server" visible="false">
<td align="center" style="background-color: #ffffff; margin-left: -5;" width="100%">
<telerik:RadRotator ID="rdRotator" runat="server" Width="432px" Height="132px" CssClass="horizontalRotator" ScrollDuration="500" ItemHeight="120" ItemWidth="128" RotatorType="Buttons" WrapFrames="false" OnItemDataBound="rdRotator_ItemDataBound" BorderColor="white">
<ItemTemplate>
<asp:Image ID="imgPreview" Height="108" Width="125" CreativeId='<%# Eval("CreativeId")%>' onclick='<%# "InitiateAsyncRequest(" +Eval("CreativeID") + " );" %>' runat="server" ToolTip='<%# Eval("Filename") %>' Style="cursor: pointer; opacity: 0.5" />
</ItemTemplate>
</telerik:RadRotator>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<br />
<div id="dvMediaInformation" runat="server">
<table width="90%" cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" colspan="2">
<b> <asp:Label ID="lblMedialbl" CssClass="lblCampaignMedia" runat="server">Media : </asp:Label>
</b><b>
<asp:Label ID="lblMediaName" CssClass="lblCreative" runat="server"></asp:Label>
</b>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<telerik:RadAjaxManager ID="rdAjaxManager" runat="server" OnAjaxRequest="rdAjaxManager_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rdAjaxManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="MediaContent" />
<telerik:AjaxUpdatedControl ControlID="dvMediaInformation" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function InitiateAsyncRequest(argument) {
$("img[id*='imgPreview']").css("opacity", "0.5");
$("img[creativeid='" + argument + "']").css("opacity", "1");
var ajaxManager = $find("<%= rdAjaxManager.ClientID %>");
ajaxManager.ajaxRequest(argument);
return false;
}
</script>
</telerik:RadCodeBlock>
On Server Side:
protected void rdRotator_ItemDataBound(object sender, RadRotatorEventArgs e)
{
ClientCampaignCreative _ClientCampaignCreative = (ClientCampaignCreative)e.Item.DataItem;
if (_ClientCampaignCreative != null)
{
CacheManager.Instance.CacheCreativeImage(_ClientCampaignCreative.FileThumbnail, _ClientCampaignCreative.CreativeId);
Image imgPreview = (Image)e.Item.FindControl("imgPreview");
if (imgPreview != null)
{
imgPreview.ImageUrl = QueryStringManager.Instance.AddCreativeId(NECAdNetwork.Common.Utils.BaseUrl + "ShowImage.aspx", _ClientCampaignCreative.CreativeId);
if (e.Item.Index == 0)
{
imgPreview.Attributes.Add("style", "opacity:1; cursor: pointer;");
}
}
}
else
{
lblMessage.Text = "Media Information not found.";
dvMediaInformation.Visible = false;
}
}