Jquery图片弹出框插件-jQuery lightBox

插件信息

官网：http://leandrovieira.com/projects/jquery/lightbox
Demo：http://leandrovieira.com/projects/jquery/lightbox

预览图

使用步骤

1、添加对以下js和css文件的引用

 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

2、加入以下js代码

$(function() {
    $('#gallery a').lightBox({});
});

3、在body标签中加入图片相关的html代码

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

参数配置

参数名	参数说明	可选值	默认值
参数名	参数说明	参数取值	默认值
verlayBgColor	定义覆盖层的颜色	颜色值	默认值：#000 (black)
overlayOpacity	定义覆盖层的的透明度	0-1的小数	0.8
imageLoading	设置加载动画	图片路径字符串	images/lightbox-ico-loading.gif
imageBtnClose	设置关闭弹出框的按钮图片路径	图片路径字符串	images/lightbox-btn-close.gif
imageBtnPrev	设置弹出框上一张图片导航按钮图片路径	图片路径字符串	images/lightbox-btn-prev.gif
imageBtnNext	设置弹出框下一张图片导航按钮图片路径	图片路径字符串	images/lightbox-btn-next.gif
containerBorderSize	设置图片框的边框大小	整数	10
containerResizeSpeed	重置图片容器的速度	整数	400
keyToNext	显示下一张幻灯片的快捷键	键字母	n
keyToPrev	显示上一张幻灯片的快捷键	键字母	p
keyToClose	关闭幻灯片的快捷键	键字母	c