Hi akhter,
Problem is not with the code. Problem is in the binary data.
For elevateZoom plugin data-zoom-image required to be bigger in size. But the image you have binded is small one.
So its displaying like in your screenshot.
So you need to bind big size image in DataList.
Check this example. Now please take its reference and correct your code.
Database
For this example i have used table named tblFiles whose schema is defined as follows.
You can download the database table SQL by clicking the download link below.
Download SQL file
For insert binary data more details refer below article.
HTML
<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>
Namespace
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
Code
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();
}
}
Screenshot
