JQUERY图片弹出框插件-JQUERY LIGHTBOX

所属分类:UI-对话框和灯箱,弹出层

 48449  87  查看评论 (8)
JQUERY图片弹出框插件-JQUERY LIGHTBOX ie兼容6

使用步骤

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

相关插件-对话框和灯箱,弹出层

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    olive倩雯 0
    2018/2/9 10:25:17
    不错的插件,但是显示的时候有点慢 回复
    ever 0
    2016/10/20 19:10:37
    搞不懂。为什么这个插件开发出来的页面在安卓手机上面不能分享朋友圈
        Ape0
        2017/8/8 15:22:52

        分享朋友圈需要调用微信jssdk

    回复
    Heart 0
    2016/1/7 21:01:43

    又没那种弹出一个div,图片可以在里面通过鼠标放大和移动啊

        Ape0
        2017/8/8 15:23:43

        http://www.jq22.com/yanshi961 你看下这个

    回复
    激情奢华的魅力 0
    2015/9/30 12:09:30

    插件挺不错,正好用上

    回复
    炉子 0
    2014/12/1 3:28:15
    不是jquery的 是prototype.js的
        羽歌0
        2017/3/21 18:01:52

        对 楼主 乱来

    回复
取消回复