llightbox使用 (图片放大效果)

来源:互联网 发布:网页源码看不懂 编辑:程序博客网 时间:2024/06/05 01:59


<ul class="ads_nav list-unstyled">
                    <h4><a href="javascript:;" style="color:#f4546f;">家族相册</a></h4>
                    <li><a href="images/slider1.jpg" data-lightbox='example-set' title="依旧宝贝"><img src="images/slider1.jpg"> </a></li>
                    <li><a href="images/slider1.jpg" data-lightbox='example-set' title="依旧宝贝"><img src="images/slider1.jpg"> </a></li>
                    <li><a href="images/slider1.jpg" data-lightbox='example-set' title="依旧宝贝"><img src="images/slider1.jpg"> </a></li>
                    <li><a href="images/slider1.jpg" data-lightbox='example-set' title="依旧宝贝"><img src="images/slider1.jpg"> </a></li>

                    <div class="clearfix"></div>

</ul>


这是html种的图片的代码  当然了 首先需要引入lightbox.js 跟 lightbox.css两个 


这里需要注意的是 一定要有data-lightbox属性 这里设置均为一致  表示全部放入lightbox盒子中 由插件来进行管理  


具体可以查看官网配置  修改相关配置