Hi rajeesh,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
img
{
height: 160px;
width: 160px;
}
</style>
<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" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript">
$(function () {
$("#DataList1 Table").mouseover(function () {
var price = $(this).find("input:hidden").val();
$("#MyPopup .modal-body").html("Price is : " + price);
$("#MyPopup").modal("show");
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="120px">
<tr>
<td align="center">
<img src='<%# ResolveUrl(Eval("ImageUrl").ToString()) %>' alt="" />
<asp:HiddenField ID="hfPrice" runat="server" Value='<%#Eval("Price") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
VB.Net
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("ImageName"), new DataColumn("Price"),
new DataColumn("ImageUrl"),
new DataColumn("ZoomImageUrl")
});
dt.Rows.Add("Hydrangeas", 10, "~/Images/Small/Hydrangeas.jpg");
dt.Rows.Add("Jellyfish", 20, "~/Images/Small/Jellyfish.jpg");
dt.Rows.Add("Koala", 30, "~/Images/Small/Koala.jpg");
dt.Rows.Add("Penguins", 40, "~/Images/Small/Penguins.jpg");
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 dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("ImageName"), New DataColumn("Price"), New DataColumn("ImageUrl"), New DataColumn("ZoomImageUrl")})
dt.Rows.Add("Hydrangeas", 10, "~/Images/Small/Hydrangeas.jpg")
dt.Rows.Add("Jellyfish", 20, "~/Images/Small/Jellyfish.jpg")
dt.Rows.Add("Koala", 30, "~/Images/Small/Koala.jpg")
dt.Rows.Add("Penguins", 40, "~/Images/Small/Penguins.jpg")
DataList1.DataSource = dt
DataList1.DataBind()
End If
End Sub
Screenshot
