loner_li JQuery插件实现相册光箱特效（后台数据库调图片和前台直接显示）

最新推荐文章于 2021-08-05 14:20:11 发布

liang_jqzd

最新推荐文章于 2021-08-05 14:20:11 发布

阅读量923

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/angtoutianwai/article/details/8902778

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.后台数据库调图片

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
       <style type="text/css">
        #gallery
        {
            background-color: #444;
            padding: 10px;
            width: 520px;
        }
        #gallery ul
        {
            list-style: none;
        }
        #gallery ul li
        {
            display: inline;
        }
        #gallery ul img
        {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
        }
        #gallery ul a:hover img
        {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        #gallery ul a:hover
        {
            color: #fff;
        }
    </style>
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/NFLightBox.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var settings = { containerResizeSpeed: 350
            };
            $('#gallery ul a').lightBox(settings);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

//后台

    public partial class 相册 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                imgload();
            }
        }
        private void imgload()
        {
            string conStr = ConfigurationManager.ConnectionStrings["sqlImgpic"].ConnectionString;
            SqlConnection con = new SqlConnection(conStr);
            con.Open();
            SqlCommand cmd = con.CreateCommand();
            cmd.CommandText = "select * from T_Photo";
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            StringBuilder sb = new StringBuilder();
            sb.Append("<ul>");
            foreach (DataRow row in dt.Rows)
            {
                sb.Append("<li><a href=" + row["bigimgUrl"].ToString() + "><img src=" + row["smallimgUrl"].ToString() + "/>" + "</a></li>");

            }
            sb.Append("</ul>");
            gallery.InnerHtml = sb.ToString();
            cmd.Dispose();
            con.Close();
            con.Dispose();
        }

}

2.前台直接显示

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #gallery
        {
            background-color: #444;
            padding: 10px;
            width: 520px;
        }
        #gallery ul
        {
            list-style: none;
        }
        #gallery ul li
        {
            display: inline;
        }
        #gallery ul img
        {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
        }
        #gallery ul a:hover img
        {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        #gallery ul a:hover
        {
            color: #fff;
        }
    </style>
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/NFLightBox.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var settings = { containerResizeSpeed: 350
            };
            $('#gallery a').lightBox(settings);
        });
    </script>
</head>
<body>
<div id="gallery">
        <ul>
            <li><a href="images/image5.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image5.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image6.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image6.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image7.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image7.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image8.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image8.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image9.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image9.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image10.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image10.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image11.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image11.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image12.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image12.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image1.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image1.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image2.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image2.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image3.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image3.jpg" width="100" alt="" />
            </a></li>
            <li><a href="images/image4.jpg" title="Add title to show image name or description">
                <img src="images/thumb_image4.jpg" width="100" alt="" />
            </a></li>
        </ul>
        </div>
</body>
</html>

liang_jqzd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
loner_li JQuery插件实现相册光箱特效（后台数据库调图片和前台直接显示）

1.后台数据库调图片http://www.w3.org/1999/xhtml"> #gallery { background-color: #444; padding: 10px; width: 520px; }
复制链接

扫一扫