2-3 图片灯箱插件——lightBox
本节编程练习不计算学习进度，请电脑登录imooc.com操作

图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

例如，以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当用户点击“我的相册”中某一张图片时，则采用“灯箱”的方式显示选中图片，在显示图片时，还可以切换上下张和自动播放及关闭图片。

任务

我来试试，亲自调用图片灯箱插件显示相册中选中的图片。

在下列代码的第35行，调用图片灯箱插件的lightBox()方法，实现选中图片的“灯箱”式显示效果。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>图片灯箱插件</title>
  5.         <link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  8.         <script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title">
  14.                 <span class="fl">我的相册</span>
  15.             </div>
  16.             <div class="content">
  17.                 <div class="divPics">
  18.                     <ul>
  19.                         <li><a href="http://img1.sycdn.imooc.com//52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
  20.                             <img src="http://img1.sycdn.imooc.com//52e489f20001ecfc04480275.jpg" alt="" />
  21.                         </a></li>
  22.                         <li><a href="http://img1.sycdn.imooc.com//52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
  23.                             <img src="http://img1.sycdn.imooc.com//52e48a1e0001eec804480275.jpg" alt="" />
  24.                         </a></li>
  25.                         <li><a href="http://img1.sycdn.imooc.com//52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
  26.                             <img src="http://img1.sycdn.imooc.com//52e48a4c00015ad204480275.jpg" alt="" />
  27.                         </a></li>
  28.                     </ul>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.  
  33.         <script type="text/javascript">
  34.             $(function () {
  35.                 ?
  36.                     overlayBgColor: "#666", //图片浏览时的背景色
  37.                     overlayOpacity: 0.5, //背景色的透明度
  38.                     containerResizeSpeed: 600 //图片切换时的速度
  39.                 })
  40.             });
  41.         </script>
  42.     </body>
  43. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .divPics ul
  22. {
  23.     list-style: none;
  24.     padding: 0px;
  25.     margin: 0px;
  26. }
  27. #divtest .content .divPics ul li
  28. {
  29.     display: inline;
  30. }
  31. #divtest .content .divPics ul img
  32. {
  33.     border: 5px solid #444;
  34.     border-width: 5px;
  35.     width: 75px;
  36.     height: 75px;
  37. }
  38. #divtest .content .divPics ul a:hover img
  39. {
  40.     border: 5px solid #fff;
  41.     border-width: 5px;
  42.     color: #fff;
  43. }
  44. #divtest .content .divPics ul a:hover
  45. {
  46.     color: #fff;
  47. }
  48. .fl
  49. {
  50.     float: left;
  51. }
  52. .fr
  53. {
  54.     float: right;
  55. }
下一节