<script type="text/javascript"> function LoadDiv(url) { var img = new Image(); var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); var imgLoader = document.getElementById("imgLoader"); imgLoader.style.display = "block"; img.onload = function() { imgFull.src = img.src; imgFull.style.display = "block"; imgLoader.style.display = "none"; }; img.src = url; var width = document.body.clientWidth; if (document.body.clientHeight > document.body.scrollHeight) { bcgDiv.style.height = document.body.clientHeight + "px"; } else { bcgDiv.style.height = document.body.scrollHeight + "px"; } imgDiv.style.left = (width - 650) / 2 + "px"; imgDiv.style.top = "20px"; bcgDiv.style.width = "100%"; bcgDiv.style.display = "block"; imgDiv.style.display = "block"; return false; } function HideDiv() { var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); if (bcgDiv != null) { bcgDiv.style.display = "none"; imgDiv.style.display = "none"; imgFull.style.display = "none"; } } </script> <style type="text/css"> body { margin: 0; padding: 0; height: 100%; overflow-y: auto; } .modal { display: none; position: absolute; top: 0px; left: 0px; background-color: black; z-index: 100; opacity: 0.8; filter: alpha(opacity=60); -moz-opacity: 0.8; min-height: 100%; } #divImage { display: none; z-index: 1000; position: fixed; top: 0; left: 0; background-color: White; height: 300px; width: 600px; padding: 3px; border: solid 1px black; } * html #divImage { position: absolute; } </style> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="FileName" HeaderText="Image Name" /> <asp:TemplateField HeaderText="Preview Image"> <ItemTemplate> <div> <a href='<%#DataBinder.Eval(Container.DataItem,"TITLE") %>'> <asp:Image ID="imgProdImage" runat="server" CssClass="product" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"FilePath") %>' ToolTip='<%#DataBinder.Eval(Container.DataItem,"Filename") %>' /> </a> </div> <%-- <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("")%>' Height="82px" Width="108px"/>--%> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> actuaaly i forgot to put div tag which is putting after gridview in the .aspx page div is <div id="divBackground"> <div id="divImage"> <table style="height: 100%; width: 100%"> <tr> <td valign="middle" align="center"> <img id="imgLoader" alt="" src="images/loader.gif" /> <img id="imgFull" runat="server" alt="" src="" style="display: none; height:700px; width: 590px" /> </td> </tr> <%--<tr> <td align="center" valign="bottom"> <%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" /> </td> </tr>--%> </table> </div> </div> .cs page bind info to grid and after that create row data bound.. like this protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { foreach (GridViewRow row in GridView1.Rows) { Image imgProdImage = (Image)row.FindControl("imgProdImage"); if (imgProdImage != null) { imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)"); imgProdImage.Attributes.Add("onmouseout", " HideDiv()"); } } }
take a look at http://fancybox.net/
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)