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('注意：您确定要删除这商品的报价？')");
            }
        }

 

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