GridView使用lightbox，鼠标点击显示图片效果

对Css 和Js的引用，因为用了母板页，所以，我在aspx.cs文件中添加了引用，形式为：

View Code

protected void Page_Load(object sender, EventArgs e)
{

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");
if (!IsPostBack)
{
//ddl_brandbind();
if (!string.IsNullOrEmpty(Session["ShopUserId"].ToString()))
{
BindGridViewList(int.Parse(Session["ShopUserId"].ToString()));
}
}
}

同时，我还修改了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('注意：您确定要删除这商品的报价？')");
}
}

实现后的效果：(点击名称时触发实现)