Jquery插件实现图片显示【客户端】

Jquery插件实现图片显示【客户端】_第1张图片


前台

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
    #mydiv ul{ list-style-type:none;}
    #mydiv ul li{ display:inline;}
    #mydiv{ width:500px; border:solid 1px #444; background-color:#333;}
    </style>

    <script src="jquery/Jquery1.7.js" type="text/javascript"></script>
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
    <script src="jquery/NFLightBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#mydiv ul a').lightBox({ containerResizeSpeed: 1000});
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mydiv" runat="server">
    
    </div>
    </form>
</body>
</html>


后台


 public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
             if (!IsPostBack)
            {
                string sqlcon = @"Data Source=Lan-PC;Initial Catalog=News;Persist Security Info=True;User ID=sa;Password=478950";
                SqlConnection conn = new SqlConnection(sqlcon);
                SqlCommand cmd = conn.CreateCommand();
                conn.Open();
                cmd.CommandText = "select BigImgUrl,SmallImgUrl from T_Photo";
                SqlDataAdapter ap = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                ap.Fill(dt);
                StringBuilder sb = new StringBuilder();
                sb.Append("<ul>");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    sb.Append("<a href=" + dt.Rows[i]["BigImgUrl"] + ">");//添图片路径
                    sb.Append("<li>");
                    sb.Append("<img src=" + dt.Rows[i]["SmallImgUrl"] + ">");//添图片路径
                    sb.Append("</li>");
                    sb.Append("</a>");

                }
                sb.Append("</ul>");
                mydiv.InnerHtml = sb.ToString();
            }
        }
    }


你可能感兴趣的:(Jquery插件实现图片显示【客户端】)