【JQuery】图片灯箱插件——lightBox

最新推荐文章于 2024-05-27 09:36:31 发布

badlyForPapers

最新推荐文章于 2024-05-27 09:36:31 发布

阅读量612

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/happyhaojie/article/details/51098558

版权

jQuery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

这个真的超级有用！
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的相册</span>
            </div>
            <div class="content">
                <div class="divPics">
                    <ul>
                        <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                            <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                            <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                            <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" /> 
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({  
                    overlayBgColor: "red", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 100 //图片切换时的速度
                })
            });
        </script>
    </body>