首页 > Ajax和PHP > lightBox插件的使用方法和演示地址

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

2010年1月27日
阅读评论 发表评论

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

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

下边是使用方法：

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

1

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

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

1

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

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

1

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<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吧，确实很好用的。

lightBox的演示地址和作者的“官方主页”在这里：

http://leandrovieira.com/projects/jquery/lightbox/

不要忘记这是由PHP iask的战地提供的哦。

战地音乐 Ajax和PHP ,

没有相关文章

  1. 本文目前尚无任何评论.