圖片燈箱插件——lightBox
該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進(jìn)度條，還能以自動播放的方式瀏覽圖片，調(diào)用格式如下：
$(linkimage).lightBox({options})
其中l(wèi)inkimage參數(shù)為包含圖片的<a>元素名稱，options為插件方法的配置對象。
例如，以列表的方式在頁面中展示全部的圖片，當(dāng)用戶單擊其中某張圖片時，通過引入的圖片插件，采用“燈箱”的方式顯示所選的圖片，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)用戶點擊“我的相冊”中某一張圖片時，則采用“燈箱”的方式顯示選中圖片，在顯示圖片時，還可以切換上下張和自動播放及關(guān)閉圖片。
任務(wù)
我來試試，親自調(diào)用圖片燈箱插件顯示相冊中選中的圖片。
在下列代碼的第35行，調(diào)用圖片燈箱插件的lightBox()方法，實現(xiàn)選中圖片的“燈箱”式顯示效果。
- ?不會了怎么辦
-
- 首先，獲取包含圖片的<a>元素，然后，通過這些元素調(diào)用
lightBox()方法則可以實現(xiàn)以“燈箱”方式顯示選中圖片的效果。
- “lightBox”方法名稱書寫是否正確，必須區(qū)分大小寫。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片燈箱插件</title>
<link rel="stylesheet" type="text/css" href="http://idcbgp.cn/data/jquery.notesforlightbox.css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://idcbgp.cn/data/jquery.notesforlightbox.js"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的相冊</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://img1.sycdn.imooc.com//52e489f20001ecfc04480275.jpg" title="第1篇風(fēng)景圖片">
<img src="http://img1.sycdn.imooc.com//52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img1.sycdn.imooc.com//52e48a1e0001eec804480275.jpg" title="第2篇風(fēng)景圖片">
<img src="http://img1.sycdn.imooc.com//52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img1.sycdn.imooc.com//52e48a4c00015ad204480275.jpg" title="第3篇風(fēng)景圖片">
<img src="http://img1.sycdn.imooc.com//52e48a4c00015ad204480275.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
?
overlayBgColor: "#666", //圖片瀏覽時的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //圖片切換時的速度
})
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest .content .divPics ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
#divtest .content .divPics ul li
{
display: inline;
}
#divtest .content .divPics ul img
{
border: 5px solid #444;
border-width: 5px;
width: 75px;
height: 75px;
}
#divtest .content .divPics ul a:hover img
{
border: 5px solid #fff;
border-width: 5px;
color: #fff;
}
#divtest .content .divPics ul a:hover
{
color: #fff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
