Show Bigger (Enlarge) Image on MouseOver in DataList using jQuery in ASP.Net

Hi rajeesh,

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

Database

CREATE TABLE tblFiles
(
    Id INT PRIMARY KEY NOT NULL,
    ImageName VARCHAR(100) NULL,
    Path nvarchar(500) NULL
)
GO
INSERT INTO tblFiles VALUES(1,'Chrysanthemum.jpg','Images/Chrysanthemum.jpg')
INSERT INTO tblFiles VALUES(2,'Desert.jpg','Images/Desert.jpg')
INSERT INTO tblFiles VALUES(3,'Hydrangeas.jpg','Images/Hydrangeas.jpg')
INSERT INTO tblFiles VALUES(4,'Jellyfish.jpg','Images/Jellyfish.jpg')
INSERT INTO tblFiles VALUES(5,'Koala.jpg','Images/Koala.jpg')
INSERT INTO tblFiles VALUES(6,'Lighthouse.jpg','Images/Lighthouse.jpg')
INSERT INTO tblFiles VALUES(7,'Penguins.jpg','Images/Penguins.jpg')
INSERT INTO tblFiles VALUES(8,'Tulips.jpg','Images/Tulips.jpg')

HTML

<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*=ImageButton1]").hover(
        function () {
            $("[id*=imgBig]").attr('src', $(this).attr('src'));
            $("[id*=imgBig]").show();
        }, function () {
            $("[id*=imgBig]").attr('src', '');
            $("[id*=imgBig]").hide();
        });
    });
</script>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal">
    <ItemTemplate>
        <table>
            <tr>
                <td style="border: medium ridge #FF6600">
                    <asp:ImageButton ID="ImageButton1" runat="server" CommandName="itemclick" Height="50px"
                        ImageUrl='<%# Eval("Path") %>' Width="50px" BorderColor="#E37046" />
                </td>
                <td>
                    <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("Id") %>' />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
<hr />
<asp:Image ID="imgBig" runat="server" Height="100px" Width="100px" Style="display: none;" />

Namespaces

C#

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

VB.Net

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

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM tblFiles";
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                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
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM tblFiles"
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                DataList1.DataSource = dt
                DataList1.DataBind()
            End Using
        End Using
    End Using
End Sub

Screenshot