今天继续给大家介绍jquery图片播放插件，这个插件叫LightBox，使用非常简单灵活，配置也十分简洁方便，即使你是jquery初学者，相信看了下面的介绍后也能非常迅速地创建自己的图片播放器了。

LightBox图片播放插件的项目主页地址：http://leandrovieira.com/projects/jquery/lightbox/

LightBox图片播放插件的最新下载地址：http://leandrovieira.com/download/7/

接下来我就来介绍一下如何使用这个插件吧，希望能给大家带来帮助。

1、引入jquery核心库和lightbox插件库文件

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

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

使用这个插件你不需针对插件改变任何的html代码，只需要用强大而又灵活的jquery选择器即可完成lightbox的初始化过程，十分方便。

html代码如下：

<a href="image1.jpg">
    <img src="thumb_image1.jpg" width="72" height="72" alt="" />
</a>

$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

• overlayBgColor：这个属性可以覆盖lightbox默认的背景颜色，默认为#000

• overlayOpacity：这个属性可以覆盖lightbox默认遮罩的透明度，默认为0.8

• imageLoading：这个属性可以指定lightbox加载图片时的loading图标，默认是images/lightbox-ico-loading.gif

• imageBtnClose：这个属性可以指定lightbox关闭图片的按钮图标，默认是images/lightbox-btn-close.gif

• imageBtnPrev：前一张图片的按钮图标，默认是images/lightbox-btn-prev.gif

• imageBtnNext：后一张图片的按钮图标，默认是images/lightbox-btn-next.gif

• containerResizeSpeed：切换图片时容器改变大小的时间间隔，默认为400

• txtImage：指定图片的文字介绍

• txtOf：指定那个“of”，如1 of 5可以改成“1/5”或者“1共5”

• imageBlank：指定图片尚未载入时的默认图片，默认为images/lightbox-blank.gif

• keyToClose：关闭图片播放器的快捷键，默认为“C”

• keyToPrev：浏览上一张图片的快捷键，默认为“P”

• keyToNext：浏览下一张图片的快捷键，默认为“N”

使用上述配置的示例代码如下：

$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});

嗯，到这里就介绍完了，希望这款jquery图片播放插件lightbox能给你的网页添加一道美丽的风景线，有其他问题可以留言告诉我。