Enlarge Image From Datalist With Database Using Jquery
Image Enlarge From DataList Using Jquery Plugin in Asp.Net C#.
DEMO
Download Coding
HTML Coding
C# Coding
DataList Add - Table Repeatcolumn & Bind Database Field
Next - Show Table Firlds & Datalist Datacolumn
Image Enlarge From DataList Using Jquery Plugin in Asp.Net C#.
DEMO
Download Coding
HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Enlarge an Image from Datalist Using Jquery in Asp.Net C#</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.imgt {
height: 100px;
width: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$("img.imgt").click(function (e) {
var enlarge = '<img src='<%#Eval("imgpath") %> + $(this).attr("alt") + '></img>';
$('#ImgEnlarge')
.html($(enlarge)
.animate({ height: '360', width: '870' }, 1500));
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="1" cellspacing="2" width="880px" align="center" class="BlueBorder"
style="background: White;">
<tr>
<td style="height: 50px;">
</td>
</tr>
<tr>
<td>
<asp:DataList ID="dListImages" runat="server" RepeatColumns="10">
<ItemTemplate>
<table border="1">
<tr>
<td>
<img alt='<%#Eval("imgpath") %>' src='<%#Eval("imgpath") %>' class="imgt" /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: central;">
<div id="ImgEnlarge"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
C# Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select imgpath from
reg", con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
adp.Fill(dt);
dListImages.DataSource = dt;
dListImages.DataBind();
}
}
First - Create New Form - Add Datalist - Bind Images Data Column
DataList Add - Table Repeatcolumn & Bind Database Field
Next - Show Table Firlds & Datalist Datacolumn
Next - Connect Database Connection - Bind Images To Datalist
Thanks a lot author for bringing such useful information into our knowledge.
ReplyDeleteKeep doing your good work, have a great week ahead.
Property in lucknow , plot for sale in lucknow, property in lucknow for sell, property in lucknow for rent , post free property ads online ,
hi the image is not showing after i click the image to enlarge if the file name has spaces. for e.g if the filename is "myimage.jpg" it shows but if the filename is my "image.jpg" how can i overcome this pls.
ReplyDelete