In this example I will
show images from database and will display thumbnails on the webpage in
Datalist control. When we take the mouse over any thumbnail image then the
large version of that image will appear in the specified Div. It will work like
a slider in my example.
Steps we follow in this example
to demonstrate the concept:
1. Create a folder in the root directory
of the website i.e. “Images". This folder will contain all the images that
we want to load and show in the slider.
2. Now Design the webpage and add script in Head
section of webpage:
In the <Head> tag of the
design page (.aspx):
Add the jQuery reference
and function. And also set reference to style sheet.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">
$(function () {
$("img.imgthumbnail").hover(function (e) {
var largeImg = '<img src='+ $(this).attr("src") + '></img>';
$('#ladiv')
.html($(largeImg)
.animate({ height: '250', width: '335'}, 1600));
});
});
</script>
In the <body> tag write
as:
<body>
<form
id="form1"
runat="server">
<fieldset style="width: 370px;">
<legend><strong>Enlarge image in slider on mouse over Using Jquery</strong></legend>
<br />
<div class="imgdiv">
<div id="ladiv" style="height: 252px; width: 334px;"></div>
<hr/>
<asp:DataList ID="DataList1"
runat="server"
RepeatColumns="3">
<ItemTemplate>
<asp:Image ID="img1" CssClass="imgthumbnail"
Width="110px"
Height="120px"
ImageUrl='<%#DataBinder.Eval(Container.DataItem,
"image_path") %>' runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
</fieldset>
</form>
</body>
ASP.NET Code section
using C#:
Now write the following code
in code behind file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class
gallery : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
protected void
Page_Load(object sender, EventArgs e)
{
con.Open();
DataTable
dt = new DataTable();
SqlDataAdapter
adp = new SqlDataAdapter("select * from img", con);
adp.Fill(dt);
DataList1.DataSource = dt;
DataList1.DataBind();
}
}
Now
create your own application using above example and test the result.
0 comments:
Post a Comment