Hi kats9993,
I have created sample that full fill your requirement using the below article.
HTML
CSharp.aspx
<table>
<tr>
<td>
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4" class="zoom">
<ItemTemplate>
<table>
<tr>
<td align="center">
<img src='<%# Eval("ID", "ImageCSharp.aspx?ImageID={0}")%>' alt="" data-zoom-image='<%# Eval("ID", "ImageCSharp.aspx?ImageID={0}")%>'
height="150px" width="150px" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</td>
<td>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="zoom"
PageSize="5" AllowPaging="true">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Image Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" Height="100" Width="100" runat="server" ImageUrl='<%# Eval("ID", "ImageCSharp.aspx?ImageID={0}")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
$(function () {
$(".zoom img").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
</div>
CSharp.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
string strQuery = "SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg' 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();
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
dt.Dispose();
}
}
ImageCSharp.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ImageID"] != null)
{
string strQuery = "SELECT * FROM tblFiles WHERE id = @id";
String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.Add("@id", SqlDbType.Int).Value = Convert.ToInt32(Request.QueryString["ImageID"]);
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
DataTable dt = new DataTable();
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
}
catch
{
dt = null;
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
}
if (dt != null)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = dt.Rows[0]["ContentType"].ToString();
Response.AddHeader("content-disposition", "attachment;filename=" + dt.Rows[0]["Name"].ToString());
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
}
}
VB.aspx
<table>
<tr>
<td>
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4" class="zoom">
<ItemTemplate>
<table>
<tr>
<td align="center">
<img src='<%# Eval("ID", "ImageVB.aspx?ImageID={0}")%>' alt="" data-zoom-image='<%# Eval("ID", "ImageVB.aspx?ImageID={0}")%>'
height="150px" width="150px" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</td>
<td>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="zoom"
PageSize="5" AllowPaging="true">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Image Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" Height="100" Width="100" runat="server" ImageUrl='<%# Eval("ID", "ImageVB.aspx?ImageID={0}")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
$(function () {
$(".zoom img").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
</div>
VB.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Dim dt As New DataTable()
Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings("conString").ConnectionString
Dim strQuery As String = "SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg' ORDER BY ID"
Dim cmd As New SqlCommand(strQuery)
Dim con As New SqlConnection(strConnString)
Dim sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
Try
con.Open()
sda.SelectCommand = cmd
sda.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
DataList1.DataSource = dt
DataList1.DataBind()
Catch ex As Exception
Response.Write(ex.Message)
Finally
con.Close()
sda.Dispose()
con.Dispose()
dt.Dispose()
End Try
End Sub
ImageVB.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Request.QueryString("ImageID") IsNot Nothing Then
Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings("conString").ConnectionString
Dim strQuery As String = "SELECT * FROM tblFiles WHERE id = @id"
Dim cmd As SqlCommand = New SqlCommand(strQuery)
cmd.Parameters.Add("@id", SqlDbType.Int).Value = Convert.ToInt32(Request.QueryString("ImageID"))
Dim con As New SqlConnection(strConnString)
Dim sda As New SqlDataAdapter
cmd.CommandType = CommandType.Text
cmd.Connection = con
Dim dt As New DataTable
Try
con.Open()
sda.SelectCommand = cmd
sda.Fill(dt)
Catch ex As Exception
dt = Nothing
Finally
con.Close()
sda.Dispose()
con.Dispose()
End Try
If dt IsNot Nothing Then
Dim bytes() As Byte = CType(dt.Rows(0)("Data"), Byte())
Response.Buffer = True
Response.Charset = ""
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Response.ContentType = dt.Rows(0)("ContentType").ToString()
Response.AddHeader("content-disposition", "attachment;filename=" & dt.Rows(0)("Name").ToString())
Response.BinaryWrite(bytes)
Response.Flush()
Response.End()
End If
End If
End Sub
Screenshot