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

Last Reply 27 days ago By dharmendr

Posted 27 days ago

i am retrieving data from data base to image control in datalist

Now I want to display selected image from datalist to image control which is outside of datalist.

below is my html 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="productdetails.aspx.cs" Inherits="WebApplication21.View.User.productdetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link href="../../css/bootstrap.css" rel="stylesheet" />
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <div class="row">
        <div class="col-sm-4" style="height:500px; ">
            <asp:Image ID="Image1" runat="server"  CssClass=" img-rounded img-responsive" Style="width:300px;height:300px;margin-top:20px"/>
        </div>
        <div class="col-sm-8"  style="height:500px; ">
          <h1> Name : <asp:Label ID="Label1" runat="server" Text="Product Name"></asp:Label></h1>
           <h2> Date : <asp:Label ID="Label2" runat="server" Text="Price"></asp:Label>    </h2>
                 <h2>Price :  <asp:Label ID="Label3" runat="server" Text="Phone"></asp:Label>    </h2>
                 <h2> Email : <asp:Label ID="Label4" runat="server" Text="Posted By:"></asp:Label>    </h2>
            <h2>Contact:  <asp:Label ID="Label5" runat="server" Text="Posted By:"></asp:Label>    </h2>
        </div>
    </div>
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:Image ID="Data" runat="server" CssClass="img-rounded img-responsive" Width="120px"
            Height="100px" 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>
<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'
        });
    });
</script>
</asp:Content>

 

Posted 27 days ago

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