码迷,mamicode.com
首页 > 其他好文 > 详细

ligbox 插件介绍

时间:2018-05-21 10:31:44      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:源文件   htbox   下载地址   ati   查看   CQ   ie8   query   mmc   

浏览器支持情况:一般情况都支持。最好是jQuery v1.x + lightbox.js,这样的组合IE6,IE7,IE8也支持!

1 light插件的下载地址:https://pan.baidu.com/s/1JeI6bXGwcPu9ohOYHGmmcQ

2 欣赏一下目录结构:

技术分享图片

 

3 使用方法:

3.1 在页面中引入源文件:
   <link href="path/to
技术分享图片ghtbox.css" rel="stylesheet">
   <script src="path/to
技术分享图片ghtbox.js"></script>(你当前页面有jQuery 库文件)或者 <script src="path/to技术分享图片ghtbox-plus-jquery.js"></script>(你当前页面没有jQuery 库文件)

   注意:
   1 一定要有jQuery 库文件!!!且一定要在lightbox.js之前 !!!  
   2 lightbox.css中引用了一些图片(/dist/images)  确保路径正确

技术分享图片

 

技术分享图片

3.2 属性有三个:data-lightbox,data-title,data-alt 后两个根据需要设置
        如果是一组图片(就是轮播的时候属于一组),那么 data-lightbox 值要保持一致,否则不需要

4 修改默认选项的方法:

<script>
    lightbox.option({
      ‘resizeDuration‘: 200,
      ‘wrapAround‘: true
    })
</script>

 以下为ligbox的所有选项:

技术分享图片

 

 

ligbox 插件介绍

标签:源文件   htbox   下载地址   ati   查看   CQ   ie8   query   mmc   

原文地址:https://www.cnblogs.com/haiqin/p/9065553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!