Description:-
In Previous Example we
already Explain that How to Craete Inner zoom Effect of the Image when mouse is
over on Image using Jquery. But now in this example we Explain that How to
create Inner Zoom Effect of the Image bind in Gridview or Datalist control fetching
image from sqlserver database and create inner zoom effect of the image using
jquery in asp.net
Generally we bind the image in Gridview from sqlserver database and when
user move mouse on image inside Gridview the Effect of the Inner zoom image
will be Display.
This is simply done by using this jquery function like
<script type="text/javascript">
$(function () {
$("#GridView1").find("[id$=zoom_05]").elevateZoom({
zoomType : "inner",
cursor: "crosshair"
});
});
</script>
to show Example of How to Create Autocomplete Textbox search Autocomplete TextBox search in Ajax
to show example of Redirect the page in Javascript Redirect one page to another using Javascript
How to Read write File in Asp.Net Read/write file using C# asp.net
to Download Complete Example clickbelow image downloadlink
Innerzoom.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Innerzoom.aspx.cs" Inherits="Innerzoom" %>
<!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>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src="jquery.elevateZoom-2.5.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#GridView1").find("[id$=zoom_05]").elevateZoom({
zoomType :
"inner",
cursor: "crosshair"
});
});
</script>
</head>
<body>
<div>
<form runat="server">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"> <asp:Image ID="zoom_05" Width="20" Height="20" ImageUrl='<%# Eval("file1") %>' data-zoom-image='<%# Eval("file1") %>' runat="server"/></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</div>
</body>
</html>
Innerzoom.aspx.cs:-
using
System;
using
System.Collections;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
using
System.Data.SqlClient;
public partial class Innerzoom :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
string con = @"Data
Source=SQLDB;Initial Catalog=Demo;User ID=Demoh;Password=Demo1@";
string q1 = "select file1 from kirit";
DataSet dsOrders = new DataSet();
SqlDataAdapter da = new SqlDataAdapter();
SqlConnection cn = new SqlConnection(con);
SqlCommand cmd = new SqlCommand(q1,
cn);
cn.Open();
da.SelectCommand = cmd;
cmd.ExecuteNonQuery();
da.Fill(dsOrders);
GridView1.DataSource = dsOrders;
GridView1.DataBind();
}
}
Thank you most welcome
ReplyDeletethank you. keep viewing update post on my blog.
ReplyDelete