loner_li JQuery插件 实现相册光箱特效（后台数据库调图片和前台直接显示）
2013-05-08 22:16
926 查看
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">
<div id="gallery" runat="server">
</div>
</form>
</body>
</html>
//后台
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>
<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">
<div id="gallery" runat="server">
</div>
</form>
</body>
</html>
//后台
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery插件实现相册效果（数据库调用图片）
- 实现背景图片镜头模糊特效的jQuery插件
- jQuery插件实现大图全屏图片相册
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- jQuery实现点击小图片淡入淡出显示大图片特效
- java图片上传并预览，前台用jQuery插件AjaxFileUpload，后台用FileUtils.copyFile.
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jQuery插件boxScroll实现图片轮播特效
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jquery制作图片放大显示插件Lightbox2.6图片相册
- jQuery实现点击小图片淡入淡出显示大图片特效
- jQuery图片特效插件Revealing实现拉伸放大
- jQuery插件expander实现图片翻转特效
- jQuery插件slicebox实现3D动画图片轮播切换特效
- jQuery插件实现大图全屏图片相册
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- jQuery插件实现图片轮播特效
- Jquery插件实现图片显示【客户端】
- 分享一个jquery插件：实现类似淘宝上鼠标经过图片右侧显示大图的效果