Hi nauna,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[3] {
new System.Data.DataColumn("Id", typeof(int)),
new System.Data.DataColumn("Name", typeof(string)),
new System.Data.DataColumn("Path",typeof(string)) });
dt.Rows.Add(1, "Chrysanthemum", "Images/Chrysanthemum.jpg");
dt.Rows.Add(2, "Desert", "Images/Desert.jpg");
dt.Rows.Add(3, "Hydrangeas", "Images/Hydrangeas.jpg");
dt.Rows.Add(4, "Jellyfish", "Images/Jellyfish.jpg");
return View(dt);
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<System.Data.DataTable>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('.img-box').zoom();
// $('.img-box').zoom({ on: 'grab' });
// $('.img-box').zoom({ on: 'click' });
// $('.img-box').zoom({ on: 'toggle' });
});
</script>
</head>
<body>
<%foreach (System.Data.DataRow row in Model.Rows)
{%>
<div class="col-md-3 no-padding">
<div class="p-data">
<div class="img-box">
<img src="<%=row["Path"]%>" />
</div>
</div>
</div>
<%} %>
</body>
</html>
Screenshot
