Display selected (clicked) image from DataList in Image control using jQuery in ASP.Net

Hi akhter,

Check this example. Now please take its reference and correct your code.

HTML

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:Image ID="Data" runat="server" CssClass="img-rounded img-responsive" Width="150px"
            Height="150px" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>'
            alt="" data-zoom-image='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data"))%>' />
        <br />
        <br />
    </ItemTemplate>
</asp:DataList>
<br />
<asp:Image ID="Image1" runat="server" Style="width: 200px; height: 200px; margin-top: 20px" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=DataList1] img").elevateZoom({
            cursor: 'pointer',
            imageCrossfade: true,
            loadingIcon: 'loading.gif'
        });
        $("[id*=DataList1] img").on('click', function () {
            $('[id*=Image1]').attr('src', $(this).attr('src'));
        });
    });
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM tblFiles";
        SqlCommand cmd = new SqlCommand(query);
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT * FROM tblFiles"
        Dim cmd As SqlCommand = New SqlCommand(query)
        Dim dt As DataTable = New DataTable()
        Using con As SqlConnection = New SqlConnection(conString)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                sda.Fill(dt)
            End Using
        End Using

        DataList1.DataSource = dt
        DataList1.DataBind()
    End If
End Sub

Screenshot