Page 47 - JavaScript修炼之道

任务15 创造光箱特效 35

载入FancyBox

ui/lightbox/index.html

<link rel="stylesheet" type="text/css"
href="vendor/fancybox/jquery.fancybox-1.2.6.css" />
<script type="text/javascript" src="vendor/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="vendor/fancybox/jquery.fancybox-1.2.6.pack.js"></script>

链接到单个图片

ui/lightbox/index.html

<a href="beach_normal.jpg" title="A gorgeous beach">
<img src="beach.jpg" alt="Beach" />
</a>
链接到一组可切换浏览的图片

ui/lightbox/index.html

<li>
<a href="beach_normal.jpg" rel="demo" title="A gorgeous beach">
<img src="beach.jpg" alt="Beach" />
</a>
</li>
<li>
<a href="feline_normal.jpg" rel="demo" title="A cute cub">
<img src="feline.jpg" alt="Feline" />
</a>
</li>
初始化FancyBox（放了些自定义参数）

ui/lightbox/lightbox.js

$(function() {
$('#thumbnails a').fancybox({
zoomSpeedIn: 300, zoomOpacity: true, overlayColor: '#000',
overlayOpacity: 0.6
});
});
相关任务

 任务12
 任务13