jQuery实现LightBox效果 - rlightbox

转自[url=http://site518.net/responsive-lightbox-with-jqueryui/]给力技术[/url]

rlightbox是一个轻量级的[url=http://site518.net/tag/jquery-2/]jQuery[/url]插件，它可以用来展示多样的内容，比如图片、视频、Flash动画等，它还可以自适应浏览器的宽高。除此之外，它拥有一些其他同类插件所没有的功能：可实现只展示图片的一部分，通过拖动来查看图片其它部分。因为它是基于jQuery UI的，所以自定义样式也变得非常方便。
如何使用

　　具体的用法非常简单，先引入jQuery、jQuery UI、rlightbox插件以及相关的CSS样式文件

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.rlightbox.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.8.16.custom.css"/>
<link type="text/css" rel="stylesheet" href="lightbox.css"/>

　　将rlightbox效果设置到一组图片中，给图片设置相同的class属性即可设为一组

<a href="01.jpg" class="site518"><img src="01_thumb.jpg" /></a>
<a href="02.jpg" class="site518"><img src="02_thumb.jpg" /></a>

　　最后初始化，看看效果吧~~~

$( ".site518" ).rlightbox();

[url=http://site518.net/demo/rlightbox/demo.htm]演示地址[/url]