学步园

http://www.oschina.net/p/jquery+lightbox/

http://www.oschina.net/question/54100_3890

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本.就是一个页面上的弹出式对话框的组件， 它能被快速安装并且运作于所有流行的浏览器.

而 JQuery Lightbox 是在 jQuery 框架的基础上实现版本。

jQuery LightBox 插件的使用方法和演示地址

鉴客 发表于 1-30 22:31 2年前, 2回/4001阅, 最后回答: 1年前 ( 0人收藏此话题,
我要收藏
|举报)

讨论区 » 技术分享

顶 0 踩

ligthBox是基于jquery开发的一个图片展示特效，这个插件实际应用的包仅仅7K够小了吧。关键在于使用的时候非常简单，似乎你根本就不 用修改你的任何代码包括Html。利用jquery的选择器，然后直接绑定lightBox方法就可以了。

体积小，使用简单，无侵入是lightbox的最大优点了。

下边是使用方法：

因为它是在jquery基础上开发的，所以你首先必须包含jquery包如下：

<script type="text/javascript" src="js/jquery.js">

当然更加需要包含lightBox文件了，这个不用说

<script type="text/javascript" src="js/jquery.lightbox-0.5.js">

引入lightBox的样式文件，这个文件在 lightBox下载压缩包中存在

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css>

下边就是用jquery的选择器，选择需要绑定lightBox方法的图片集合，然后绑定事件。

<script type="text/javascript">
$(function() {
	// 第一种选择
	$('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接
	// 第二种选择
	$('#gallery a').lightBox(); // 选择id为gallery下的所有链接
	// 第三种选择
	$('a.lightbox').lightBox(); // 选择所有class为lightbox的链接
	// 第四种选择
	$('a').lightBox(); // 选择页面中所有的链接
	//…………还有更多的选择，哈哈，发挥你的想象力吧
});
</script>

如果你是一步一步跟着做的话，现在你就可以看看效果了，是不是特玄，呵呵……当然如果你不知道jquery的选择器怎么用，那么确实是一个麻烦问题。学习 一下jquery吧，确实很好用的。