Ref:Display images from SQL Server Database in ASP.Net GridView control
Image Gallery using ASP.Net DataList Control Part II - Image Slideshow
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Images from Database in GridView Example</title>
<style type="text/css">
.modal
{
display: none;
position: absolute;
top: 0px;<a href="CSharp.aspx">CSharp.aspx</a>
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: 550px;
width: 610px;
padding: 3px;
border: solid 1px black;
}
.dlTable
{
border: double 1px #D9D9D9;
width: 200px;
text-align: left;
}
</style>
<script type="text/javascript">
var CurrentPage = 1;
function GetImageIndex(obj) {
while (obj.parentNode.tagName != "TD")
obj = obj.parentNode;
var td = obj.parentNode;
var tr = td.parentNode;
if (td.rowIndex % 2 == 0) {
return td.cellIndex + tr.rowIndex;
}
else {
return td.cellIndex + (tr.rowIndex * 2);
}
}
function LoadDiv(url, lnk) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
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;
imgDiv.style.left = (width - 650) / 2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width = "100%";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center" colspan="3" style="height: 500px;">
<img id="imgLoader" runat="server" alt="" src="images/loader.gif" />
<img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 600px" />
</td>
</tr>
</table>
</div>
<div id="divBackground" class="modal">
</div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatLayout="Table"
Width="500px">
<ItemTemplate>
<br />
<table cellpadding="5px" cellspacing="0" class="dlTable">
<tr>
<td>
<asp:Label ID="lblId" Text='<%# Eval("ID") %>' runat="server" />
<br />
<asp:Label ID="lblName" Text='<%# Eval("Name") %>' runat="server" />
<br />
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ID", "ImageCSharp.aspx?ImageID={0}")%>'
Width="200px" Height="200px" onmouseover="LoadDiv(this.src, this)" onmouseout = "HideDiv()" Style="cursor: pointer" />
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
string strQuery = "select ID, Name from tblFiles order by ID";
SqlCommand cmd = new SqlCommand(strQuery);
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
DataList1.DataSource = dt;
DataList1.DataBind();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
dt.Dispose();
}
}
Namespaces
using System.Data;
using System.Data.SqlClient;
