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

鉴客 发布于 2010/01/30 22:31
阅读 16K+
收藏 1

【Gopher China万字分享】华为云的Go语言云原生实战经验!>>>

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

 

加载中
0
seegoo
seegoo

请问如果是在框架集中怎么使用,也就是说照片显示在子框架中 但是现在是要在父框架顶层显示跳出的照片,这个问题怎么解决呢?

返回顶部
顶部