GridView使用lightbox，鼠标点击显示图片效果
对Css 和Js的引用，因为用了母板页，所以，我在aspx.cs文件中添加了引用，形式为：
View Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3
4 LiteralControl lc = new LiteralControl("<script type=\"text/javascript\" src=\"../js/jquery.js\"></script><script type=\"text/javascript\" src=\"../js/jquery.lightbox-0.5.js\"></script>");
5
6 this.Page.Header.Controls.Add(lc);
7 mlman.Common.CssHelper.AddStyleSheet(this, "../css/jquery.lightbox-0.5.css");
8 if (!IsPostBack)
9 {
10 //ddl_brandbind();
11 if (!string.IsNullOrEmpty(Session["ShopUserId"].ToString()))
12 {
13 BindGridViewList(int.Parse(Session["ShopUserId"].ToString()));
14 }
15 }
16 }
同时，我还修改了Jquery.lightbox-0.5.js中的图片路径，将其更改为自己系统的实际路经。
先看lightbox的使用说明：
<script type="text/javascript">
$(function() {
// 第一种选择
$('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接
// 第二种选择
$('#gallery a').lightBox(); // 选择id为gallery下的所有链接
// 第三种选择
$('a.lightbox').lightBox(); // 选择所有class为lightbox的链接
// 第四种选择
$('a').lightBox(); // 选择页面中所有的链接
//…………还有更多的选择，发挥你的想象力吧
});
</script>
gridview 动态生成id，而第一种选择用法是基于ID，效果不能实现。我用了第二种，这段代码，在
aspx页面中增加。
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
//$('#gallery a').lightBox();
});
</script>
说说后台对GridView的绑定，我使用了HyperLink，其aspx代码为：
转换为模板后：
<asp:TemplateField HeaderText="名称">
<ItemTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
。。。。
aspx.cs代码，在DataBound事件初始化时:（红色代码）
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
mlman.BLL.D_PRODUCTS product = new mlman.BLL.D_PRODUCTS();
mlman.BLL.D_PRODUCT_IMAGE proimg = new mlman.BLL.D_PRODUCT_IMAGE();
if (e.Row.RowType == DataControlRowType.DataRow)
{
int productId = int.Parse(DataBinder.Eval(e.Row.DataItem, "proid").ToString());
mlman.Model.D_PRODUCTS model = new mlman.Model.D_PRODUCTS();
model = product.GetModelByCode(productId);
HyperLink hlink = new HyperLink();
hlink = (HyperLink)e.Row.FindControl("HyperLink2");
if (model != null)
{
hlink.NavigateUrl = "/SiteUser/" + proimg.GetModelByCode(productId).Url;
hlink.Text = model.Name;
hlink.ToolTip = model.Name;
hlink.Attributes.Add("rel", "lightbox");
e.Row.Cells[1].Text = model.Size;
}
else
{
e.Row.Cells[1].Text = "位置规格";
}
e.Row.Cells[5].Attributes.Add("onclick", "javascript:return confirm('注意：您确定要删除这商品的报价？')");
}
}
实现后的效果：(点击名称时触发实现)
